如何为 chrome 和 Firefox 添加查看密码图标？答案

【问题标题】：How to add see password icon just for chrome and Firefox?如何为 chrome 和 Firefox 添加查看密码图标？
【发布时间】：2018-05-30 22:40:17
【问题描述】：

我使用 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>

【问题讨论】：

标签： html css google-chrome passwords microsoft-edge

【解决方案1】：

只需使用 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>

【讨论】：

@ImanFakhari 您不需要删除浏览器中的标准密码显示按钮，您需要在其上绘制自己的。这是解决重复按钮问题的方法。
优秀的解决方案！但安德烈请为跨度添加背景颜色：白色（对于使用 png 的人）并将输入填充右更改为 0。因为边缘图标无法在填充中定位。并为输入制作填充使我的图像旁边的图标。谢谢
这个实现的主要问题是Edge的“查看密码”图标更好。最好让浏览器功能覆盖（特别是如果 Chrome 将来添加它！），并且只添加 JavaScript 按钮作为备用计划。
使用本机功能通常是个好主意，但是，在 IE11 和 Edge (85) 中，密码显示图标/按钮并不总是显示。例如，在字段中输入文本，然后离开字段，然后重新输入后，显示字段文本的能力就消失了。可以手动删除内容，然后该字段必须失去焦点并重新获得焦点才能重新启用。这对于用户来说可能是也可能不是可接受和已知的行为，并且可能具有 UX/安全优势，但也可能是禁用本机行为并实施您自己的行为的正当理由。

【解决方案2】：

Detect whic browser the user is using (click here)
如果是 Edge 或 IE，请将visibility: hidden; CSS 属性添加到您的按钮

代码：

$('#show_password').on("mousedown", function functionName() {
    //Change the attribute to text
    $('#password').attr('type', 'text');
    $('.glyphicon').removeClass('glyphicon-eye-open').addClass('glyphicon-eye-close');
}).on("mouseup", function () {
    //Change the attribute back to password
    $('#password').attr('type', 'password');
    $('.glyphicon').removeClass('glyphicon-eye-close').addClass('glyphicon-eye-open');
}
);

var isIE = /*@cc_on!@*/false || !!document.documentMode;
var isEdge = !isIE && !!window.StyleMedia;
var showButton = !(isIE || isEdge)
if (!showButton) {
    document.getElementById("show_password").style.visibility = "hidden";
}

<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<title>example</title>
</head>
<body>
<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>
</body>
</html>

将鼠标按住按钮以显示密码。

【讨论】：

很好的解决方案。谢谢
这是否有理由被否决？这是一个糟糕的解决方案吗？

【解决方案3】：

纯css版本可以使用IE10+和edge伪元素::-ms-reveal

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

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

【讨论】：