密码框老是被浏览器自动填充怎么办?

一、前言

浏览器的密码自动填充功能其实挺好用的,但是架不住咋们的产品/甲方不想用呢?那没办法,只能硬着头皮接了。不过我不属于上面的情况哈,我是多次有人在群里问到了,刚好有了灵感写了个工具。

我粗略的在网上翻了翻,解决该问题的主要有三种方式,如下:

  1. 设置 autocomplete="off"autocomplete="new-password",但是貌似有时候不生效。

  2. 初始设置为 text input 框,聚焦的时候修改为 password input 框,不过在有些浏览器下貌似也有问题,具体的自己网上搜吧。

  3. 使用 text input 框,不过对该框使用特殊的字体,就是那种任何字都会被显示成 * 的那种字体。这种方式要注意字体版权的问题。不过我不知道这种方式下,如果用户使用折叠输入(中文输入)时是怎么处理的。

接下来我就讲讲我的思路吧,由于我之前琢磨过一段时间的富文本,在这个问题的处理上就受益于之前的经验。

我使用了 beforeinputconpositionend 两个事件对用户的输入进行了拦截,将真实数据进行缓存,而输入框中的内容则根据当前的配置(明文显示/密文显示)进行动态的展示。

并且记录了每一步有效输入的内容、光标和选区状态,配合 keydown 事件就实现 ctrl + zctrl + shift + z 的功能。

二、使用

首先,我们需要准备一个原生 input 标签,然后引入 nautoc-password 库,之后进行初始化和绑定操作就可以了。

1、CDN

<input type="text" id="password" />
<script src="https://cdn.jsdelivr.net/npm/nautoc-password@latest"></script>
<script>
  // 缓存数据
  const formData = {
    password: '123465',  // 初始密码,没有则设置空字符串
  }

  // 初始化
  const [config, bind] = nautocPassword({
    model: {
      get() {
        return formData.password
      },
      set(value) {
        formData.password = value
      },
    },
  })

  // 绑定
  bind(document.querySelector('#password'))
</script>
复制代码

2、npm

import nautocPassword, { NAutocPasswordOption } from 'nautoc-password'

// 保存密码
let password = ''

// 初始化配置
const option: NAutocPasswordOption = {
  model: {
    get() {
      return password
    },
    set(value) {
      password = value
    },
  },
  sign: 'x', // 密文显示时的替代字符。默认值:*。
  cleartext: true, // 设置为默认明文显示。false 则为密文显示。默认值:false。
  forceUpdateFocus: 'none', // sign 与 cleartext 动态更新后,或手动调用 forceUpdate 进行手动更新后,input 输入框的聚焦状态。默认值:end。
}

// 初始化。获取到具有双向绑定的配置对象和input节点绑定函数
const [config, bind] = nautocPassword(option)

// 生成一个 input 框
const input = document.createElement('input')
input.type = 'text'
document.body.append(input)

// 绑定 input 框
bind(input)
复制代码

动态修改配置

// 设置模拟的密码框为密文显示。会触发 input 框对内容进行实时更新。
config.cleartext = false

// 设置模拟的密码框密文显示时的替代字符。会触发 input 框对内容进行实时更新。
config.sign = '#'
复制代码

外部值变化后,更新到 input 输入框中

// 在外部更改内容
password = '654321'
// 使用 api 将更改同步到 input 输入框中
config.forceUpdate()
复制代码

三、功能预览

1、明文显示与密文显示相互切换

toggle.gif

2、动态修改密文字符

sign.gif

3、内容输入

input.gif

4、ctrl + z 和 ctrl + shift + z

ctrl.gif

5、外部修改后,同步数据

forceup.gif

四、结尾

项目地址:github.com/clinfc/naut…

分类:
前端
标签: