vue禁止浏览器记住密码:使用文本输入框作为密码控件,将输入字符自动转换为*星号,避开浏览器提示保存明文密码的功能,输入框可键入删除复制粘贴替换。Vue、JS
本文针对禁止浏览器记住密码、自动填充的功能使用的方法是:不使用type为password的输入框,全程使用type=”text“的文本输入框,根据每次输入值替换文本框内容为星号 “*” 或者 小圆点 “·”(中文)。可以复制粘贴密码,可选中替换。
·
浏览器默认会对用户提交表单行为进行监控,若发现type属性值为password的input控件,且该控件可见时,会提示用户是否记住密码。
网上搜到的方法有不少,如点击时改变输入框属性之类的,自动填充autocomplete="off"之类的,效果不明显,且火狐上测试一直没有效果。最后还是决定仅使用文本框作为密码输入框,但视觉上看到的是输入的明文,观感不佳。
本文针对禁止浏览器记住密码、自动填充的功能使用的方法是:
不使用type为password的输入框,全程使用type=”text“的文本输入框,根据每次输入值替换文本框内容为星号 “*” 或者 小圆点 “·”(中文)。
可以复制粘贴密码,可选中替换。
handleinput(val){
let realarr = this.loginForm.plainPassword.split(''); // 真实密码
let coverarr = val.split(''); // 覆盖的密码数组
let coverlen = coverarr.length; // 覆盖的密码数组
let realLen = realarr.length; // 覆盖的密码数组
let lastchar = ''; // 新输入的字符
let index = -1; // 新输入的字符位置
coverarr.forEach((el, elIndex) => {
if (el !== '·') {
// 截取未被替换为·的字符串,即为本次键入的内容
index = elIndex;
lastchar = lastchar + el; // 因为监听的是每次输入框的变化值,所以插入的一定是连贯的字符串
}
});
if (lastchar.length) {
index = ( index + 1 ) - lastchar.length // 有输入的字符串,计算真正的插入位置
}
if (realLen +lastchar.length === coverlen) {
// 未删除字符串且新增字符,直接插入
realarr.splice(index, 0, lastchar);
} else if (index === -1) {
//index = -1 即未找到非*号字符,没有新增,无法通过该方法判断在哪个位置删除的
// 使用selectionStart获取光标位置,确定位置,删去缺少的元素个数
let pos = document.getElementById('coverpwd').selectionStart;
realarr.splice(pos, realLen - coverlen);
} else {
// 替换字符
realarr.splice(index, (realLen + lastchar.length)-coverlen, lastchar);
}
this.$set(this.loginForm, 'plainPassword', realarr.join(""))
this.$set(this.loginForm, 'coverPassword', coverarr.join("").replace(/./g,'·'))
},
checkCapslock(e) {
// 判断大写键是否启动
const { key } = e
this.capsTooltip = key && key.length === 1 && (key >= 'A' && key <= 'Z')
}
在el-form-item中设置prop="plainPassword"为真实密码的值,依然可以使用elementUI表单的验证方法。
<el-tooltip v-model="capsTooltip" content="Caps lock is On" placement="right" manual>
<el-form-item prop="plainPassword">
<el-input
ref="plainpassword"
v-model="loginForm.plainPassword"
type="text"
placeholder="密码"
tabindex="2"
autocomplete="off"
style="display:none"
/>
<el-input
id="coverpwd"
v-model="loginForm.coverPassword"
placeholder="密码"
tabindex="2"
autocomplete="off"
@keyup.native="checkCapslock"
@input="handleinput"
@blur="capsTooltip = false;"
@keyup.enter.native="handleLogin"
/>
</el-form-item>
</el-tooltip>
更多推荐
已为社区贡献7条内容
所有评论(0)