<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <script src="https://use.fontawesome.com/fd9dba5260.js"></script> <div class="input-group" style="width: 49%;"> <input value="This my password" id="password_show" type="password" class="form-control"> <span style="width:0%" id="password_show_button" class="input-group-addon"><i class="fa fa-eye-slash" aria-hidden="true"></i></span> </div>

$(document).ready(function(){ $("#password_show_button").mouseup(function(){ $("#password_show").attr("type", "password"); }); $("#password_show_button").mousedown(function(){ $("#password_show").attr("type", "text"); }); });