最近有这个需求,不让浏览器记住密码(提示保存密码)
在网上查了好多解决方案,但都行不通
我也很绝望。。
只要显示这个小钥匙,不管你怎么处理,都会提示你保存密码
静下心来慢慢调试,发现chrome记住密码的一些规则
以下为服务器打开页面的情况
- 非服务器不会提示保存密码
- input 值每次变动,浏览器都会查找界面内是否存在“type=password” 且是否有值,有就会显示“钥匙”
- 通过js 延迟赋值不会触发
解决方法一:
通过监听input的输入,时时清空然后赋值
缺点: 输入框会时时闪动
<div id="app">
用户名: <input type="password" name="uname" id="uname"><br>
密码:<input type="password" name="pwd" id="pwd">
</div>
<script>
function getEl(id) {
return document.querySelector(`#${id}`)
}
let pwd = getEl('pwd')
function change(e){
let val = e.value
e.value = ''
setTimeout(()=>{
e.value = val
}, 0)
}
</script>
方法二:
如果用户输完用户名在输密码是没问题的。
但是用户发现用户名错了,去更改用户名,这时浏览器就会触发“小钥匙”
<div id="app">
用户名:
<input type="text" name="uname" id="uname" oninput="changText(this)">
<br>
密码:
<input type="password" name="pwd" id="pwd" oninput="changePwd(this)">
</div>
<script>
function getEl(id) {
return document.querySelector(`#${id}`)
}
let uname = getEl('uname')
let pwd = getEl('pwd')
function changText(e){
changePwd()
}
function changePwd(e){
if (!e) {
let val = pwd.value
pwd.value = ''
setTimeout(()=>{
pwd.value = val
}, 0)
} else {
changText()
let val = e.value
e.value = ''
setTimeout(()=>{
e.value = val
}, 0)
}
}
</script>
方法三:
针对多个input type=password 设置密码的
<div id="app">
用户名:
<input type="text" name="uname" id="uname" oninput="changText(this)">
<br>
密码:
<input type="password" name="pwd" id="pwd" oninput="changePwd(this)">
</div>
<script>
function getEl(id) {
return document.querySelector(`#${id}`)
}
let uname = getEl('uname')
let pwd = getEl('pwd')
function changText(e){
if (!e) {
let val = uname.value
uname.value = ''
setTimeout(()=>{
uname.value = val
}, 0)
} else {
changePwd()
let val = e.value
e.value = ''
setTimeout(()=>{
e.value = val
}, 0)
}
}
function changePwd(e){
if (!e) {
let val = pwd.value
pwd.value = ''
setTimeout(()=>{
pwd.value = val
}, 0)
} else {
changText()
let val = e.value
e.value = ''
setTimeout(()=>{
e.value = val
}, 0)
}
}
</script>