解决chrome 浏览器记住密码问题

2019-01-19  本文已影响0人  梦回路上小一

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

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>

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

上一篇下一篇

猜你喜欢

热点阅读