Forum Moderators: open
I want to change a <input type="password"> into something that acts more like a password field on the iPhone. Meaning; when the user enters a character in the field, that character is shown for a short period of time then changes into the normal password character.
I've tried several different approaches.
First I tried changing the password input into text and then onkeyup storing the contents into a hidden field and changing the characters to a dot. That wasn't working too well and I abandoned the idea.
Next I tried aligning both a password field and text field next to one another. With some resizing techniques using a hidden <span>, I would shrink or grow both fields so the user was always typing in the text field and then transfered the characters into the pw field. It was getting pretty messy - and scary. Also - didn't work if you tried inserting a character in the middle.
There's a couple other things I tried using all sorts of CSS trickery with background images - but it's not even worth mentioning.
Now I'm out of ideas. Certainly it can't be that complicated. Anyone have a different approach/idea?
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title> Login Form </title>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
</head>
<body><form action="#" method="post">
<fieldset>
<legend>Login Form</legend>
<label for="tempPw">Password</label>
<input type="text" id="tempPw" onkeyup="iphonePw(this);"><!-- this field should be a hidden -->
<input type="text" id="finalPw">
</fieldset>
</form><script type="text/javascript">
var tempPw = '';
var finalPw = '';
function iphonePw(obj){
// get current password
finalPw = document.getElementById('finalPw').value;// store tempPw value in variable
tempPw = document.getElementById('tempPw').value;// second variable to remember length of string
tempPwLength = tempPw.length;// strip the stars
var strLen = String(tempPw).length;
tempPw = String(tempPw).substring(strLen, strLen - 1);// repopulate the finalPw field
document.getElementById('finalPw').value = finalPw + tempPw;// wait then switch the characters
setTimeout("maskTemp()",300);
}
function maskTemp(){
// reset input
document.getElementById('tempPw').value = '';var i=0;
while (i<tempPwLength){
document.getElementById('tempPw').value = document.getElementById('tempPw').value + '*';
i++;
}
}
</script></body>
</html>
Kindda sorta works. Messes up if you try to insert characters anywhere but on the end and gets all weird when you type too fast.
Hopefully someone has better luck at this than I've been having.
The general conclusion seems to be that 1) it's probably not possible to implement without bugs, and 2) it's a really bad idea anyway.
The latter I agree with, please do not do this. It's a gimmick and is not smart.
Realizing it just hasn't been done yet made it seem like a fun little challenge. I'm simply stumped and wondered if others had a better idea/direction to go with.
Obviously, if I were to use this on a real site with real people, it could easily be done with Silverlight or Flash but where's the fun in that?
The span or div just displays the asterisk or character based on the js events and position of the cursor in the password field.
At least that would be my approach
When at a computer people may be looking at what you're typing, so showing the character even for a second is a bad idea in itself.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" >
<title>Untitled</title>
<!-- CSS -->
<link rel="stylesheet" type="text/css"
href="http://yui.yahooapis.com/2.7.0/build/reset-fonts-grids/reset-fonts-grids.css">
<style type="text/css">
.displayContainer {
height: 1.2em;
}
</style>
</head>
<body>
<div>
<input type="password" id="pwd">
</div>
<!-- Scripts -->
<!-- Combo-handled YUI JS files: -->
<script type="text/javascript"
src="http://yui.yahooapis.com/combo?2.7.0/build/yuiloader-dom-event/yuiloader-dom-event.js&2.7.0/build/animation/animation-min.js"></script>
<script type="text/javascript">
YAHOO.util.Event.onDOMReady(function () {
var pwd = document.getElementById('pwd');
var displayContainer = document.createElement('div');
YAHOO.util.Dom.addClass(displayContainer, 'displayContainer');
YAHOO.util.Dom.insertBefore(displayContainer, pwd);
YAHOO.util.Event.on(pwd, 'keypress', function (e) {
var charCode = YAHOO.util.Event.getCharCode(e);
// TODO: Add special handling for non-character keys here (backspace, etc)
var displayText = String.fromCharCode(charCode);
var node = document.createElement('div');
node.appendChild(document.createTextNode(displayText));
YAHOO.util.Dom.addClass(node, 'displayValue');
if (displayContainer.hasChildNodes()) {
displayContainer.replaceChild(node, displayContainer.firstChild);
}
else {
displayContainer.appendChild(node);
}
var myAnim = new YAHOO.util.Anim(node, {
opacity: { to: 0 }
}, 2, YAHOO.util.Easing.easeOut);
myAnim.animate();
});
});
</script>
</body>
</html>
The original idea came from a request from a client who's site targets much older visitors who sometimes have difficulties with password fields. The solution was to have a checkbox that masks/unmasks the password field. I was just seeing if I could take it a step further.
Thanks for all the ideas.
