Do you have a password field that the user wants to be able to view at the click of a button? Here is the solution I came up with to handle that need…
The field…
<div class="input-group">
<input type="password" name="password" value="P@$$w0rD" placeholder="Password" id="input-password" class="form-control" required>
<span id="view-password" class="input-group-addon"><i class="fa fa-eye" aria-hidden="true"></i></span>
</div>
The javascript…
<script><!--
$('#view-password').click(function(){
$password = $('#input-password');
if ($password.prop('type') == 'password') {
$password.prop('type', 'text');
} else {
$password.prop('type', 'password');
}
$('i', this).toggleClass('fa-eye-slash');
});
//--></script>
This example relies on Bootstrap, Font Awesome, and jQuery but can easily be achieved using your a basic button and pure javascript.
jsFiddle: https://jsfiddle.net/rmullaney77/0szapv57/2
Note: Only tested with Google Chrome v60 (64-bit)