-
浏览器保存密码有时会导致一些奇葩问题，比如本该填写数额的地方浏览器自作主张的给你填上了帐号，即使加载时清空，双击仍然会以下拉框的方式供你选择。所以最后我决定直接禁掉保存密码功能，实现起来却还是遇到了麻烦：包括设置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