Javascript Show/Hide toggle button for password field

Question

I have been working on a project that requires me to implement a Show/Hide button on a form password field, that toggles between showing the password as plaintext, and hiding it

Answer 1

Using to toggle 's type on small touchscreen devices causes closing the virtual keyboard because the loses focus. Nothing horrible, you say, but the user does not expect it happen and also (unless your input field is positioned in the top half of the viewport) the open virtual keyboard pushes input field up (so it stays visible in the viewport). Subsequently, closing the virtual keyboard will reposition it again on some devices/platforms. Quite unpleasant to the user, quite a few more things to think of for the client-side developer. My solution is using instead of . Here is my piece:

function text(label){
  var input = document.getElementById(label.htmlFor);
    if(input.type === "password"){
      input.type = "text";
      label.innerHTML = "Hide";
    }else{
      input.type = "password";
      label.innerHTML = "Show";
    }
}

  
    
  
  
    
		Show