一、前言
浏览器的密码自动填充功能其实挺好用的,但是架不住咋们的产品/甲方不想用呢?那没办法,只能硬着头皮接了。不过我不属于上面的情况哈,我是多次有人在群里问到了,刚好有了灵感写了个工具。
我粗略的在网上翻了翻,解决该问题的主要有三种方式,如下:
-
设置
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()
复制代码