Tutorial :'Phone' style password entry with javascript


I am looking to improve the accessibility of a site for very young children. As their keyboard skills are quite poor, we get alot of complaints that entering passwords without being able to see the characters is too hard for them.

I wouldn't like to have a password completely unmasked but I was thinking of maybe using the cell phone style where the current character only is displayed for a couple of seconds before being masked.

Does anyone know of any javascript solutions to this i can have a look at, or even what just what this technique is actually called so I can google it more effectivel?

I have implemented a basic proof of concept which uses onChange events to update a plain text field whilst the password itself is stored in a hidden field, but i'm not sure if this is the best approach.


The reason I don't want to use a clear text field is that the system is used in schools, including by teachers. If one of the older pupils was able to get a teachers administrator password for instance then they potentially cause alot of havok.

Having a switchable cleartext / password field is an interesting idea and may well prove easier than the delayed masking method.


If a child (or an adult for that matter) have too poor typing skills to be able to use a password field, do you really think showing the letter they typed a few seconds really helps? Wouldn't a poor typist focus on their keyboard not the screen?

The easiest solution is probably to do something like the network password field in Vista: have a check box that toggle between a normal input field and a password field (and choose a sensible default), or if the login is not sensitive anyway just use a plain inputfield.


If the site really is for young children why not just let them enter a password in plain text field? It's not as if you'll be storing their credit card details.


I would probably do the reverse of what I use now (with adults), and turn it into an opportunity for a lesson for the children.

That is to make the field a normal input field, then include a link below it that says "HIDE".

Hitting the "HIDE" link will toggle it to "SHOW", and make the content of the password field starred. Hitting "SHOW" would do the reverse.

I would imagine on a children's site that you have icons for something like, "What's this?". If so, the HIDE/SHOW toggle would be an opportunity to describe why one should hide their password.

EXAMPLE (cross-section. Note that XDOM is an object that normalizes DOM functions across browsers.)

...  function init()   {      pwdEl = XDOM.getElementById('pass');      pwdClr = XDOM.getElementById('logindisplay');      toglLnk = XDOM.getElementById('showhidepwd');      pwdClr.style.display = "none"; //initiate         function mirrorType(e)       {          pwdClr.innerHTML = pwdEl.value;      }      function toggleMirror(e)       {          var toggle = pwdClr.style.display;          if (toggle == "none") {              pwdClr.style.display = "inline";              toglLnk.innerHTML = "hide";          } else {              pwdClr.style.display = "none";              toglLnk.innerHTML = "show";          }          pwdClr.innerHTML = pwdEl.value;          XDOM.stopPropagation(e);          XDOM.preventDefault(e);      }      XDOM.addListener(pwdEl, 'keyup', mirrorType, false);      XDOM.addListener(toglLnk, 'click', toggleMirror, false);  }  window.onload = init;  </script>  <style type="text/css">  #logindisplay {display:none;}  .row {display:table-row; padding:4px;}  .cell {display:table-cell; padding:4px;}  </style>  </head>  <body>  <div>      <h2>Test Show-Hide Login</h2>      <form>          <div class="row">              <p class="cell">                  <label for="pass">Password</label>               </p>              <p class="cell">                  <input type="password" id="pass" name="pass" value="" size="15" maxlength="15" />                  <br /><a href="#jsenable" id="showhidepwd"><span id="togglelogin">show</span></a>                   <span id="logindisplay" style="display:none;"> </span>              </p>          </div>      </form>      <p id="jsenable"><!-- a note about enabling JavaScript here --></p>  </div>  


In addition to other answers. You can also have a virtual keybord near the password field. So that they can click and enter the password.


I think you should have a real password field with a syle of display:none; instead of a hidden field; and an onchange event for that field that runs only once, putting a mask into your proof of concept text field.. so that the browser's built in save password can work. As others have suggested a "show password" toggle box wouldn't hurt either. The problem is that the autofill on saved form data tends to happen after the window's load event, also after the dom-ready event (used by jquery), so tying into the onchange of the hidden password field is necessary.

Note:If u also have question or solution just comment us below or mail us on toontricks1994@gmail.com
Next Post »