最近有这个需求，不让浏览器记住密码(提示保存密码)
在网上查了好多解决方案，但都行不通
我也很绝望。。
只要显示这个小钥匙，不管你怎么处理，都会提示你保存密码

image.png

静下心来慢慢调试，发现chrome记住密码的一些规则
以下为服务器打开页面的情况

1. 非服务器不会提示保存密码
2. input 值每次变动，浏览器都会查找界面内是否存在“type=password” 且是否有值，有就会显示“钥匙”
3. 通过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>

有更好的方案，请指出，共同学习。。。