一、前言
浏览器的密码自动填充功能其实挺好用的，但是架不住咋们的产品/甲方不想用呢？那没办法，只能硬着头皮接了。不过我不属于上面的情况哈，我是多次有人在群里问到了，刚好有了灵感写了个工具。
我粗略的在网上翻了翻，解决该问题的主要有三种方式，如下：
-
设置
autocomplete="off"或autocomplete="new-password"，但是貌似有时候不生效。 -
初始设置为
text input框，聚焦的时候修改为password input框，不过在有些浏览器下貌似也有问题，具体的自己网上搜吧。 -
使用
text input框，不过对该框使用特殊的字体，就是那种任何字都会被显示成*的那种字体。这种方式要注意字体版权的问题。不过我不知道这种方式下，如果用户使用折叠输入（中文输入）时是怎么处理的。
接下来我就讲讲我的思路吧，由于我之前琢磨过一段时间的富文本，在这个问题的处理上就受益于之前的经验。
我使用了 beforeinput 和 conpositionend 两个事件对用户的输入进行了拦截，将真实数据进行缓存，而输入框中的内容则根据当前的配置（明文显示/密文显示）进行动态的展示。
并且记录了每一步有效输入的内容、光标和选区状态，配合 keydown 事件就实现 ctrl + z 和 ctrl + 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()
复制代码