用户在操作敏感数据比如更换手机号码的时候需要验证是本人,但是使用input的password浏览器很恶心的缠上你,不管你怎么耍花招只要type有一次被改过password就甩不掉下拉填充框。
前几年这个属性就管用:autocomplete=‘off’
近几年他管用:autocomplete=“new-password”
但是浏览器也在不断升级不管你怎么弄他都可以填充。
方案一:
但是有个巧妙的套路,一直都可以使用:
<input type="text" onfocus="this.type='password'">
但是这个方法只在第一次使用有效。
方案二:
下面我们用css3的新属性解决方案。
将您的密码字段设置为普通文本字段,并使用CSS使用“ discs”屏蔽您的输入。该代码应如下所示:
<input type="text" class="myPassword" />
input.myPassword{
text-security:disc;
-webkit-text-security:disc;
-mox-text-security:disc;
}
请注意,这可能无法在Firefox浏览器上正常工作,并且需要使用下面解决方法:
window.onload = function() {
init();
}
function init() {
var x = document.querySelector(".myPassword");
var style = window.getComputedStyle(x);
console.log(style);
if (style.webkitTextSecurity) {
// Do nothing
} else {
x.setAttribute("type", "password");
}
}