IPhone-like password fields

http://blog.decaf.de/2009/07/iphone-like-password-fields-using-jquery/

by jp_sc • 17 years ago

39 20 17 years ago

blog.decaf.de

skip2• 17 years ago

The reference implementation seems very buggy--moving my caret and having inconsistent behavior.

I would certainly be hesitant to type my password on a website which is handling the field like that. Let the browser vendors implement this option at the application level (as an option, probably, so users can enable/disable on all websites).

rdj• 17 years ago

I don't understand why you would have a problem with this. The javascript that makes this happen, does run in the browser, on your desktop, or as you put it, the application level. Regardless of how your password is displayed when typed (either plaintext, starred, or a combo), the value of the field is sent as plain text to the web server (if not ssl). This demo attempts to solve the problem of shoulder surfing vs usability, not building a more secure login mechanism.

skip2• 17 years ago

Well from a technical standpoint you are correct. Although, if I see buggy/weird behavior on a website, right away I question what sort of hidden unsavory stuff is happening on the server side.

But there is an issue even if the implementation is totally seamless and bug-free. Maybe one site implements this slightly differently, and maybe some sites have a checkbox to clear the mask, or other sites show me each character for a fixed delay (e.g., character disappears after 250 ms or something), etc. In each case I must make some accomodations to how I expect a password field to behave. On the other hand if it is at the application level then there is opportunity to evolve the feature uniformly across all websites--and also give the user a single option which controls the behavior.

andyking• 17 years ago

Why is this "iPhone-like"? Every basic mobile phone I've owned since the internet arrived on mobiles has had this functionality when entering PINs and passwords.

mileszs• 17 years ago

A large number of people have iPhones, relative to other phones on which web browsing is usable. Also, the iPhone is the first phone worth using for browsing the web, for many people. It's nothing about which to be upset. It is simply a way for the author to easily convey the goal of the article in the title.

I don't recall see this functionality in my one previous 'smart phone' (a Treo 650), but perhaps my memory has failed me.

jonbwhite• 17 years ago

I have a Treo 650 right now, and it does have this functionality. Even though web browsing on the old Treos is pretty dismal, the older smartphones still set up a lot of the groundwork that the iPhone needed to be successful. And indeed, the iPhone has made a lot of breakthroughs in the smartphone world, but it still bothers me when it gets credit for features borrowed from its predecessors.

jonknee• 17 years ago

A lot of people who have iPhones never used data on other phones and thus describe everything as iPhone like.

briansmith• 17 years ago

The iPhone is doing it kind of unnecessarily since it has a (virtual) QWERTY keyboard. It is more of a necessity for phones with "normal" keypads because it is hard to memorize the multitap sequences (especially when there can be 10 characters per key).

prewett• 17 years ago

If I recall correctly, iPhone OS 1.x didn't reveal the last character. I remember not being to crazy about it when they changed it in 2.0.

lonestar• 17 years ago

I don't see how showing each letter individually is more secure than showing the whole password in the clear. Anyone looking at your screen is still going to see every character in your password.

The only reason this approach makes sense on mobile phones is that you can easily prevent others from seeing your screen. But if I'm logging in to a site on a projector in front of a bunch of co-workers, I don't want my password displayed to them. Not even one character at a time.

modoc2• 17 years ago

Not great for projectors, but pretty good for your average use. If I'm typing my password in, my main concern is someone walking by glancing over and seeing my whole password.

This is a good balance between security and ease of use. I rarely mistype my passwords, but my less technical mother does frequently. Showing her the char she hit would be very helpful. It's a good compromise.

silencio• 17 years ago

On a random sidenote, I remember being at WWDC last year where someone on stage was trying to demo an iPhone app that needed a login...except the login was an Apple ID and well, the password was going to be shown one character at a time to the whole audience. That was a bit of a problem :)

While clearly there needs to be something like that for the iPhone and odds of someone figuring out your password shoulder surfing very slim in most cases regardless, I can't see a downside to there being an 'unmask password' option on non-mobile devices for users who hate that all the passwords are masked (like mentioned above).

modoc2• 17 years ago

Thanks for coding this up!! It's great to have options out there for how you handle passwords.

TweedHeads• 17 years ago

Cool hack.

Here is what I use:

- Place an "Unmask" checkbox next to the password field

- onclick checkunmask()

  $("#password").type = ($("#unmask").checked)?"textbox":"password";

Simple, everybody happy.

http://mylittlehacks.appspot.com/unmask

sanj• 17 years ago

I actually find the iPhone model annoying.

The iPhone is a portable device. Just hold it close and shield it with your body when entering a password. That way your fat-fingering will be easier to recognize.

4chan4ever• 17 years ago

Anything is better than the Lotus Notes "Egyptian Hieroglyphics" password protect. Entering a password iPhone-style has a nice fluidity to it, as each leading character melts into a dot.

chaosmachine• 17 years ago

In case anyone is wondering what he means:

http://www.coderjournal.com/2008/02/lotus-notes-aol-corporat...

sili• 17 years ago

Having password fields in plain test is just ridiculous on regular computers. Even when I first saw how iPhone's password field works I though "What are they thinking".

The only reason it is useful on iPhone and other touch-screen devises is because touch-screens do not have same feedback as buttons. They need a way to show that you have entered the letter that you meant to enter. Sometimes, with long passwords it can become hard to even know that when you touched the letter it was entered into the field unless it gets shown.

embeddedradical• 17 years ago

i'll paste my comments from the other post on the very same topic:

i believe this is a good idea on a phone, but not on a computer screen. the problem is really that if you do this, then when someone is logging in with someone else with them - then they are out of options. it's easier to watch characters appear one at a time than it is to watch someone's hands on a keyboard.

for example, i have a media center setup in my living room. sometimes people are over, or my housemate is down with me, and i need to sign into netflix so we can watch movies online -- or I'm shopping with someone and now I need to sign into newegg or amazon...

I like the idea of the compromise with Jakob Nielsen's idea -- which is to have a button on the page that says like "hold down to reveal password", or "press to reveal password". i'm going to experiment between 'hold down to reveal' and 'press to reveal' next time i make a login page -- i like hold down, but maybe there's a problem with that i'm not realizing yet.

TravisLS• 17 years ago

This is a cool idea, but actually using it is incredibly jarring. I think it works on the iphone because your typing speed is so much slower. I found myself confused and second-guessing my typing a lot more using this with a keyboard.

IPhone-like password fields

Related Stories