how to make password textbox value visible when hover an icon

Question

Good day all,

I have a form that has a password field:

Naturally, the i

Answer 1

Complete example below. I just love the copy/paste :)

HTML

    

        

           

              

                  


                     

                        Email
                           

                               
                           
                     
                     

                       Password
                          

                              
                              
                          
                     
                 
              
           
      
  

CSS

.field-icon {
  float: right;
  margin-right: 8px;
  margin-top: -23px;
  position: relative;
  z-index: 2;
  cursor:pointer;
}

.container{
  padding-top:50px;
  margin: auto;
}

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");
   }
});

Try it here: https://codepen.io/anon/pen/ZoMQZP