浏览器自带的记住密码，账号或者其他的下拉框的内容怎么禁止？

浏览器保存密码有时会导致一些奇葩问题，比如本该填写数额的地方浏览器自作主张的给你填上了帐号，即使加载时清空，双击仍然会以下拉框的方式供你选择。所以最后我决定直接禁掉保存密码功能，实现起来却还是遇到了麻烦：包括设置autocomplete为off（此方法已确定无效）、动态设置password属性等方法都有各种各样的兼容问题，要么谷歌、要么火狐、要么IE的高低版本。最后解决方法如下，IE、EDGE、FF、Chrome测试通过：密码框type设置为password，设置一个隐藏域，在表单提交前将密码框的value填入隐藏域——>把密码框的value替换为圆点（Chrome的圆点比较小，百度可以找到）——>把密码框的type改为text——>提交表单，完成。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
<input oninput="myinput(this)" autocomplete="off"/>
<input id="hiddenInput" type="text" style="display: none">
<input type="button" value="发送" id="sendBtn">
<script>
    let trueValue = [];//保存真实数据的数组
    let beforeLength = 0;//隐藏框value的长度
    function myinput(self) {
      let nowLength = self.value.length;// 变化后的长度
      if(nowLength > beforeLength){//长度增加时
        trueValue.push(self.value[nowLength-1]);
        ++beforeLength;
      }else{//长度减少时
        trueValue.pop();
        --beforeLength;
      }
      document.getElementById('hiddenInput').value = trueValue.join('');//数组转化为字符串，并填充入隐藏框
      let nowValue = '';//转换为圆点
      for(let i = 0; i < nowLength; ++i){
        nowValue += '•';
      }
      self.value = nowValue;
    }
    document.getElementById('sendBtn').addEventListener('click',function(){
      console.log(document.getElementById('hiddenInput').value);//取到隐藏框的值
    })
</script>
    </body>
</html>

以上方法有两个text输入框，一个作为用户输入的，一个隐藏。输入的把value替换为圆点，隐藏框保持真正的输入值。发送隐藏框的值到后端。

从知乎上看的，整理了一下，解决方法还有其他方式，但是貌似都有问题，只有以上这种方法是终极版。哈哈。

文章来源：https://www.zhihu.com/question/23529765

浏览器自带的记住密码，账号或者其他的下拉框的内容怎么禁止？

猜你喜欢