Others

Others


Show and Hide Password Field Using JavaScript


In this example when user change the checkbox status, we have to toggle the input type 'password' and 'text'.

Demo

Example 
<!DOCTYPE html>
<html>
  <body>
    <p><input type='password' id='pwd' value='123456'></p>
    <label><input type='checkbox' id='chk' > <span>Show Password</span></label>
    <script>
      var chkBox=document.querySelector("#chk");
      var pwd=document.querySelector("#pwd");
      chkBox.onchange=function(e){
        if(pwd.type=='password'){
          pwd.type='text';
          chkBox.parentElement.querySelector("span").innerHTML='Hide Password';
        }else{
          pwd.type='password';
          chkBox.parentElement.querySelector("span").innerHTML='Show Password';
        }
      }
    </script>
  </body>
</html>
Try it Yourself