Welcome to WebmasterWorld Guest from 54.166.203.17

Forum Moderators: open

Message Too Old, No Replies

Creating a better password field

Maybe something like the iPhone?

     
2:06 pm on Jul 17, 2009 (gmt 0)

Preferred Member

10+ Year Member

joined:July 5, 2005
posts:352
votes: 0


I'm stumped.

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?

7:50 pm on July 17, 2009 (gmt 0)

Preferred Member

10+ Year Member

joined:July 5, 2005
posts:352
votes: 0


Here's my final attempt before the weekend;

<!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.

4:26 pm on July 20, 2009 (gmt 0)

Full Member

10+ Year Member

joined:Oct 9, 2007
posts: 295
votes: 0


Search Google for: iphone password field javascript
You will find others' efforts.

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.

5:47 pm on July 20, 2009 (gmt 0)

Preferred Member

10+ Year Member

joined:July 5, 2005
posts:352
votes: 0


I understand and agree, this is not something that will be useful in a real world situation. I did search, a lot, before posting here.

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?

5:59 pm on July 20, 2009 (gmt 0)

Senior Member

WebmasterWorld Senior Member 10+ Year Member

joined:June 13, 2002
posts:662
votes: 0


You could have a password field, set to transparent, set on top of a span or div. That way the password WILL be correct and a password.

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

7:12 pm on July 20, 2009 (gmt 0)

Senior Member

WebmasterWorld Senior Member 10+ Year Member

joined:May 6, 2008
posts:2011
votes: 0


The iPhone password scheme works because it's a phone...you can keep the screen to yourself. They need to show characters just because the keyboard is harder to accurately type on.

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.

10:02 pm on July 20, 2009 (gmt 0)

Senior Member from US 

WebmasterWorld Senior Member fotiman is a WebmasterWorld Top Contributor of All Time 10+ Year Member Top Contributors Of The Month

joined:Oct 17, 2005
posts:5019
votes: 24


Because of the complicated event/key handling that you'd have to account for (and I don't even think is possible), I don't think it would possible. However, below is an example that you might be able to tweak to function similarly.


<!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>

2:21 pm on July 21, 2009 (gmt 0)

Preferred Member

10+ Year Member

joined:July 5, 2005
posts:352
votes: 0


Thanks Fotiman, that's definitely another possible solution.

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.

 

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week

Featured Threads

Free SEO Tools

Hire Expert Members