'How to add see password icon just for chrome and Firefox?

I implemented a see password button for my password input using html and jquery so when I run it in Microsoft Edge and IE the browsers themselves have one button as default to see password for type=password inputs. and the result will be two see password button!

as this image

Now I have 3 solution I think!

1. Disable Edge and IE see password default button (How?)

2. Disable my see password Button in Edge and IE (How?)

3. Enable same option for chrome and Firefox (How?)

the third solution is the best i think. does chrome and Firefox have default see password button? If they have how can i use them?

Here is my code:

<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>
htmlcssgoogle-chromepasswordsmicrosoft-edge


Solution 1:[1]

Just use position:absolute for view button.

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>

Solution 2:[2]

For a pure css version you can use the IE10+ and edge pseudo-element ::-ms-reveal

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

It also can be used to change the color or background

Solution 3:[3]

Code:

$('#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>

Hold mouse down on the button to show the password.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1
Solution 2
Solution 3 GDavid

Related Questions