html - 如何为 chrome 和 Firefox 添加查看密码图标？

Question

我使用 html 和 jquery 为我的密码输入实现了一个查看密码按钮，所以当我在 Microsoft Edge 和 IE 中运行它时，浏览器本身默认有一个按钮来查看 type=password 输入的密码.结果将是两个看到密码按钮!

现在我想到了 3 个解决方案!

<强>1。禁用 Edge 和 IE 查看密码默认按钮(如何？)

<强>2。在 Edge 和 IE 中禁用我的查看密码按钮(如何？)

<强>3。为 chrome 和 Firefox 启用相同的选项(如何？)

第三个解决方案是我认为最好的。 chrome 和 Firefox 有默认的查看密码按钮吗？如果他们有我该如何使用它们？

这是我的代码:

<input type="password" class="form-control" id="password" placeholder="password " name="password">
<span class="input-group-btn">
<button id="show_password" class="btn btn-secondary" type="button" style="padding:9px;">
<span class="glyphicon glyphicon-eye-open"></span>
</button>
</span>

<script>
$('#show_password').hover(function functionName() {
    //Change the attribute to text
    $('#password').attr('type', 'text');
    $('.glyphicon').removeClass('glyphicon-eye-open').addClass('glyphicon-eye-close');
}, function () {
    //Change the attribute back to password
    $('#password').attr('type', 'password');
    $('.glyphicon').removeClass('glyphicon-eye-close').addClass('glyphicon-eye-open');
}
);
</script>

Answer 1

对于纯 css 版本，您可以使用 IE10+ 和边缘伪元素 ::-ms-reveal

input::-ms-reveal {
  display:none;
}

它也可以用来改变颜色或背景