如何为 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;
}

它还可以用于更改颜色或背景

Answer 2

只需使用position:absolute 作为视图按钮。

div {
  position: relative;
  display: inline-block;
}

input {
  padding-right: 2.4em;
  height: 2em;
}

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

span {
  position: absolute;
  right: 1px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 100;
}

span svg {
  background-color: white;
  display: block;
  padding: .2em;
  width: 1.3em;
  height: 1.3em;
}

<div>
  <input type="password">
  <span>
    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M12.015 7c4.751 0 8.063 3.012 9.504 4.636-1.401 1.837-4.713 5.364-9.504 5.364-4.42 0-7.93-3.536-9.478-5.407 1.493-1.647 4.817-4.593 9.478-4.593zm0-2c-7.569 0-12.015 6.551-12.015 6.551s4.835 7.449 12.015 7.449c7.733 0 11.985-7.449 11.985-7.449s-4.291-6.551-11.985-6.551zm-.015 3c-2.209 0-4 1.792-4 4 0 2.209 1.791 4 4 4s4-1.791 4-4c0-2.208-1.791-4-4-4z"/></svg>
  </span>
</div>