Show and Hide Password Field Text with jQuery and JavaScript

Some websites allow the user to toggle the password field to see the entered text while registering on the site.

A common example of this – when you set Wifi password within you mobile device where it also allows showing the password.

They provide an element e.g – checkbox or a button when its gets clicked then the password field text visible on the screen and when it again gets clicked then it will hide the visible text and get back to its default state.

What in the demonstration ?

You may know that the password type element doesn’t show any visible text instead, it shows the asterisk symbol (*) while inputting.

In this article, I show How you can do it with jQuery and JavaScript. For toggle the element I am using type attribute which updates according to the state.
show and hide Password field text with jQuery and JavaScript


Contents

  1. With JavaScript
  2. With jQuery
  3. Demo
  4. Conclusion

1. With JavaScript

Start with by creating a basic signup form. Here, for toggling the password field I am checkbox element and calling togglePassword() function on change event.

HTML

<table>
 <tr>
  <td>Name : </td>
  <td><input type='text' id='name' ></td>
 </tr>
 <tr>
  <td>Username : </td>
  <td><input type='text' id='username' ></td>
 </tr>
 <tr>
  <td>Password : </td>
  <td><input type='password' id='password' >&nbsp;
     <input type='checkbox' id='toggle' value='0' onchange='togglePassword(this);'>&nbsp; <span id='toggleText'>Show</span></td>
 </tr>
 <tr>
  <td>&nbsp;</td>
  <td><input type='button' id='but_reg' value='Sign Up' '></td>
 </tr>
</table>

JavaScript

Finding checkbox is checked or not. If it’s being checked then switch the type attribute to text otherwise to the password.

<script type="text/javascript">
 
 function togglePassword(el){
 
  // Checked State
  var checked = el.checked;

  if(checked){
   // Changing type attribute
   document.getElementById("password").type = 'text';

   // Change the Text
   docuemnt.getElementById("toggleText").text = "Hide";
  }else{
   // Changing type attribute
   document.getElementById("password").type = 'password';

   // Change the Text
   docuemnt.getElementById("toggleText").text = "Show";
  }

 }
 
</script>

2. With jQuery

In jQuery, for changing the type attribute using attr() method.

Completed Code

$(document).ready(function(){
 $("#toggle").change(function(){
  
  // Check the checkbox state
  if($(this).is(':checked')){
   // Changing type attribute
   $("#password").attr("type","text");
   
   // Change the Text
   $("#toggleText").text("Hide");
  }else{
   // Changing type attribute
   $("#password").attr("type","password");
  
   // Change the Text
   $("#toggleText").text("Show");
  }
 
 });
});

3. Demo

Enter your password and check the checkbox to see the changes.


4. Conclusion

In this tutorial, I discussed How you can use JavaScript and jQuery to toggle password element text.

You can use this feature as a replacement of Re-type or confirm password field from your sign-up form.

It is a greate feature which allows the user to view and verify its password but it is little risky it terms of security if your password is being exposed.

banner

Spread the love

Related Post

Be First to Comment

Leave a Reply

Your email address will not be published. Required fields are marked *