ansaurus

Question

'Phone' style password entry with javascript

Answer 1

+6 A:

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.

Dave Webb 2009-05-22 10:09:14

Answer 2

+8 A:

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.

Stein G. Strindhaug 2009-05-22 10:09:27

Answer 3

+2 A:

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.

Shoban 2009-05-22 10:12:26

Answer 4

+5 A:

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>

Fran Corpier 2009-05-22 10:50:32

I like this answer. It provides discoverability and doesn't act without first being asked to act. +1

TokenMacGuy 2009-05-23 02:47:32

Thanks, TokenMacGuy. I'm about to show bits of an example, taking into account the new info added about teachers using the same system. So, I'll reverse the example.

Fran Corpier 2009-05-23 08:16:12

Answer 5

A:

Thanks for all your answers. 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.

2009-05-22 12:57:52

Answer 6

A:

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.

Tracker1 2009-05-23 02:41:41

ansaurus

tags:

views:

answers:

'Phone' style password entry with javascript

related questions