8

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>
kenorb
  • 155,785
  • 88
  • 678
  • 743
Iman Fakhari
  • 83
  • 1
  • 2
  • 8

3 Answers3

7

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

animalito maquina
  • 2,264
  • 3
  • 20
  • 35
4

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>
Andrei Fedorov
  • 3,689
  • 2
  • 13
  • 25
  • @ImanFakhari You do not need to remove the standard password display button in the browser, you need to draw your own over it. this is the solution to the problem of duplicating buttons. – Andrei Fedorov Dec 17 '17 at 11:30
  • excellent solution! but Andrey please add background-color:white for span (for whom using png) and change input padding-right to 0.because Edge icon can not locate in on padding. and making padding for input make the icon next to my image. thanks – Iman Fakhari Dec 17 '17 at 12:20
  • The major problem with this implementation is that Edge's "see password" icon is *better*. It would be preferable to let the browser feature override (especially if Chrome adds it in the future!), and only add the JavaScript button as a backup plan. – Brilliand Feb 09 '19 at 00:45
  • 2
    Using the native functionality is usually a great idea, however, in IE11 and Edge (85) the password reveal icon/button is not always shown. For example, after entering text in the field, then leaving the field, then reentering, the ability to reveal the field's text is gone. The content can be manually deleted, then the field must lose and regain focus for the ability to be reenabled. This may or may not be acceptable and known behavior to the user, and may have UX/Security benefits, but may also be a valid reason for disabling the native behavior and implementing your own. – absolutholz Sep 02 '20 at 12:55
0

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.

GDavid
  • 128
  • 1
  • 2
  • 12