美文网首页
解决chrome 浏览器记住密码问题

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

作者: 梦回路上小一 | 来源:发表于2019-01-19 10:38 被阅读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>
    

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

    相关文章

      网友评论

          本文标题:解决chrome 浏览器记住密码问题

          本文链接:https://www.haomeiwen.com/subject/uhuadqtx.html