解决chome浏览器input的密码框自动填充问题的完美解决方法

有效的解决方法:

  两个text输入框  第一个隐藏,第二个显示,利用display:none的那个输入框来保存真实的密码值,另外一个输入框用来把输入的value值转化为小圆点。

    <input type="text" id="hiddenInput" name = 'password' autocomplete="off" value='' style="display:none" />
    <input type="text" id="input-password" name = 'password' autocomplete="off" value='' class=" password" placeholder="请输入密码"  oninput = "changeText()"/>
      
function  changeText(){
let trueValue = document.getElementById('hiddenInput').value.split('');//保存真实数据的数组
let beforeLength = document.getElementById('hiddenInput').value.length;//真是数据的长度
let self = document.getElementById('input-password') //保存圆点
let nowLength= self.value.length;// ;//圆点的长度
if(nowLength > beforeLength){//长度增加时
trueValue.push(self.value[nowLength-1]);
++beforeLength; }
else{//长度减少时
let length = document.getElementById('input-password').value.length-1;
let len = beforeLength - length;
trueValue.splice(trueValue[length],len)
//trueValue.pop();
//--beforeLength;
beforeLength=beforeLength-len;
}
document.getElementById('hiddenInput').value = trueValue.join('');//数组转化为字符串,并填充入隐藏框
let nowValue = '';//转换为圆点
for(let i = 0; i < nowLength; ++i){
nowValue += '•';
}
self.value = nowValue;
console.log(document.getElementById('hiddenInput').value)
}

猜你喜欢

转载自www.cnblogs.com/xiaolling/p/9570112.html