Skip to content

Instantly share code, notes, and snippets.

@quangpd
Created April 20, 2022 19:34
Show Gist options
  • Save quangpd/4ff7ac2127ba6e8762774f29ce6374fe to your computer and use it in GitHub Desktop.
Save quangpd/4ff7ac2127ba6e8762774f29ce6374fe to your computer and use it in GitHub Desktop.
Make password textbox value visible when hover an icon
#HTML
<div class="col-md-6">
<input id="password-field" type="password" class="form-control" name="password" value="secret">
<span toggle="#password-field" class="fa fa-lg fa-eye field-icon toggle-password"></span>
</div>
#CSS
.field-icon {
float: right;
margin-right: 8px;
margin-top: -23px;
position: relative;
z-index: 2;
cursor:pointer;
}
#JS
$(".toggle-password").click(function() {
$(this).toggleClass("fa-eye fa-eye-slash");
var input = $($(this).attr("toggle"));
if (input.attr("type") == "password") {
input.attr("type", "text");
} else {
input.attr("type", "password");
}
});
https://codepen.io/Loginet/pen/oNeevMe
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment