Grow your CSS skills. Land your dream job.

Better Password Inputs, iPhone Style

Published by Chris Coyier

Recently renowned usability expert Jakob Nielsen wrote an article Stop Password Masking in which he claims that hiding users passwords as they input them is bad practice. What he is referring to is the default browser behavior of <input type=password ... /> elements, where text entered into them turns into bullets rather than showing the real characters typed. He says it reduces user confidence in what they type and thus beginning a string of problems like more typing errors, users choosing overly-simple passwords or copying and pasting complex ones (less secure). The effect is ultimately less user satisfaction and ponentially less profit for you.

Of course he is right about all that, but masking passwords isn't something that was developed and made default just for shits and giggles. It is to keep prying eyes away from looking at your screen and learning your passwords. This fact isn't lost on Jakob who suggests making it a checkbox-style option.

Admittedly, someone peeking at your screen to capture a password is pretty rare. I'm alone in my office right now, like I am most of the time, and I bet that plant in the corner doesn't have any secret cameras in it. I'm sure a lot of you are in similar environments. But I'm of the opinion that leaving important security up to users is typically not a good choice. Gruber linked to Jakob's article, noting that the iPhone has an interesting solution to this already in use.

How the iPhone handles password inputs

  • The iPhone inputs turns text into bullet points like web password inputs, but after a quick delay, allowing you to see the typed character for a brief time.
  • The iPhone keyboard has a popup as you press each character verifying visually what character you just typed.

This is a pretty damn nice way to handle password inputs, which can be translated into use on the web. This handling of password inputs is a combination between giving better user feedback on key presses, increasing user confidence, yet still mostly hiding the password making it more difficult for casual onlookers.

We can replicate the idea behind both of these things, using jQuery!

Displaying pressed keys

Here is some super simple form markup with a password input:

<form action="#" id="login-form-1">
  <div>
      <label for="user-password">Password</label>
      <input type="password" id="user-password" name="user-password" />
  </div>
</form>

We'll use that internal div to set some relative positioning, and then set up some styling for a special div that we will insert on-the-fly in there for displaying the pressed key.

#login-form-1 div { 
   position: relative;
}
#login-form-1 div #letterViewer { 
   display: none; 
   position: absolute; 
   left: 240px; 
   top: -30px; 
   width: 100px; 
   font: bold 72px Helvetica, Sans-Serif; 
}

Then with jQuery, we can append that div and attach a keypress event to the input. When a key is pressed, that div will fade in with the letter, and fade back out. This will simulate the iPhones keyboard pressing letter verification.

$(function() {
    $("#login-form-1 div").append("<div id='letterViewer'>");
    $("#user-password").keypress(function(e) {
        $("#letterViewer")
            .html(String.fromCharCode(e.which))
            .fadeIn(200, function() {
                $(this).fadeOut(200);
            });        
    });
});

Of course, you could style this up any way you want.

Changing text to bullets / only displaying last character

The next theory is making the text into bullets as you type them, but only after a short delay allowing you to see the typed character briefly. This is a bit more difficult. You could change the password input to be of type="text", but then changing the value to bullets would be problematic because of course you need to submit the real value of the field not bullets. You can't leave the input as type="password", because nothing can be shown in those inputs except bullets.

The solution is to duplicate the password field, change it to a text input, and hide the original. This way you can use the new field and manipulate it however you want, but ultimately you submit the now-hidden password input which you keep up to date with current typed data.

We could set into writing this, but fortunately the DECAFo blog has already done the heavy lifting and created a jQuery plugin to do just this.

Simply target your password input and invoke the plugin:

$('#user-password-2').dPassword();

Of course like any good plugin, there is a bunch of options you can pass as parameters like the delay before switching, the prefix for the duplicated input, and more.

 

View Demo   Download Files

 

What do you guys think? Is this a good middle ground or the worst of both worlds?

Comments

  1. TeMc

    Although the first “Known issue” (# Adding/deleting chars from the middle doesn’t work. Works at the end of the password only.) is raising a bit worry – at the same time I’ve never found myself deleting characters from the middle.

    So, I think this is a very nice visual add-on to improve usabilty and preventing typemistakes even for advanced users.

  2. Ryan

    Thank you very much for posting this. After Jakob’s article came out I had done some thinking about how there might be a better approach than completely eliminating masking.

    I then noticed that my Windows Mobile based phone masks characters after a short delay, exactly like what you’ve described here. I made a mental note that this would be a great approach to try and emulate in my projects, but you’ve now done the heavy-lifting for me and I appreciate that.

    • Permalink to comment#

      Nokia’s OS had this delay since forever as well. Curious how iPhone always gets credit for good design years after someone else designed it…

    • Permalink to comment#

      I believe my last 2 cell phones have done this (Sanyo MM-8300 and Palm Centro), at least some of the web browsers on them do it. Quite helpful.

      However, if you want eyeballs, drop “iPhone” in your title and people fall in line to read it. Can’t fault the author for that. To be fair, the author might have never seen other uses, so the iPhone would be the first example for them.

  3. Thanks for the mention!
    It seems that all the three issues will be fixed in the upcoming release of the plugin.

    Regards from Berlin! Dirk (DECAF)

  4. uuh jear, same old issue :)
    I know security security but I have to admit:
    We live in a password-world..don’t we?
    Bevore the age of 25 there where rarely any password in my live, now I have..plenty..and they get longer :).

    But back to the problem:
    Nothing is realy secure in the internet. It is maybe only as secure as the source the password resides. So if u subsribe as user on the form xy, you have no garantee that your data is “secure”?? What do the people do with your Data? There is hardly any appearance of a “delete” process once you “unsubscript” as user? And your post dont get deleted and your data?

  5. Wieske

    It doesn’t seem to work in IE 7.

    Is this a known bug?

  6. It’s a nice touch. Nokia cellphones, for instance, have another way of doing this. They show the typed-in letter for a brief period (.5 – 1 second) then turn it into an asterisk.

    This works well when you’ve got a password with capitalized letters and/or special characters.

    But when it comes to over-the-shoulder-hacking, what is actually secure?

  7. I’d like to see a disable option. I know when I’m in a meeting I wouldn’t want my password displaying like that on a projector for all to see.

    Other than that, I like it.

    • Really good point!

    • Web010

      That can be done even easier.

      with jquery
      $(the_checkbox_selector).click(function(){
      if($(this).is(‘:checked’)){
      $(the_password_input).attr(‘type’, ‘text’);
      }else{
      $(the_password_input).attr(‘type’, ‘password’);
      }
      });

      Haven’t checked if it works, but don’t see a problem not to.

    • Web010

      To clarify:
      It will be password type by default, and when checked it will be switched to text type.

    • TeMc
      Permalink to comment#

      Yeah, I would like the above more then the iPhone style.
      It’s actually quite the same as Apple has done on their desktop operating system.

      Apple didn’t put the iPhone-like password fields in their desktop OS, instead they did the above; standard with password bullets, and by means of a checkbox giving the users the ability to releal it in clear text.

      Love it :)

    • Web010
      Permalink to comment#

      I’m happy you like it :)

  8. You are voted!
    Track back from WebDevVote.com

  9. The Unhide Passwords extension for Firefox works great in the office where I’m not worried about anyone looking over my shoulder (passwords displayed in the clear until you move off the field).

    I do not install that extension on my laptops, but something like this would be a nice compromise.

  10. I hardly ever type the wrong password, and this is not too secure, so I don’t think this is a good pratice.

  11. Great article. I am using this now.

  12. I thought about this technique yesterday and you bring up an tutorial today….. Thänx :)

  13. prafuitu

    You stupid Apple cock-suckin’ moron! This has been standard behaviour in ALL mobile phones for decades, but you (and other dumb fucks all over the net like this one: http://www.experienceinternet.co.uk/blog/archive/an-alternative-approach-to-password-confirmation/ or this one: http://www.viget.com/advance/password-fields-are-annoying/ ) come to baptize this as “the iPhone way”.
    Not to mention you’re all just UX wannabes trying to kiss the ass of an old fart like Jakob Nielsen and give him credit for all the crap he’s able to produce. See that poor stupid bastard in my second link? He makes a better point then the retarded Mr. Nielsen but noone bothers to give him credit for that. How is this fair?

    That’s about all the wisdom I’m willing to share with you at the moment. I’ll leave you with your stupid blog to carry on with your punny, meaningless life.
    Maybe when you’ll grow some brain of your own and stop living by some dying fossil’s ideas I’ll come back…

    Until then, here’s something that might give you an alternate idea about how to handle password editing at the begining or in the middle of the text: http://enhancedpass.ionut-botizan.net/

    • Ryan

      This guy makes a good point but in kind of a messed up way. My old Nokia did this with passwords. I believe it was running Symbian which would mean this has been a pretty standard mobile practice since that’s the largest mobile OS.

      Honestly why bother with all the profanity? Even though you’re right, it makes you appear pretty low-class.

    • People like prafuitu are best ignored.

      I have a Nokia N800, running a Debian-based linux distro. This shows the last letter of a password for a second or so, and it works very well.

      I’m thinking that some kind of javascript solution shouldn’t be too hard to develop to get this kind of thing working on desktop browsers. I reckon the password field should have 3 options next to it (a challenge there for beauty/usability!):

      * No password masking
      * Partial masking (last letter visible for n. milliseconds after typing)
      * Complete masking (just like today’s default behaviour for desktop browsers).

    • I’d disagree, people like prafuitu are best after a long week of work when you need something to make you laugh.

    • Permalink to comment#

      Don’t forget, profanity *and* undeserved conceit! Coupled with bursts of poor grammar and unwieldy denunciations–and an essentially anonymous post–it’s got a kind of idiot charm you could call ‘vitriol a la windbag’.

    • prafuitu
      Permalink to comment#

      @DN
      You’re 2 days late my friend…

      http://css-tricks.com/better-password-inputs-iphone-style/#comment-58361

      I already apologized to the readers of this blog, explaining that I didn’t thought any sane person would approve my comment after reading it. Apparently, I was wrong!
      Also, there’s a mention about my “limited knowledge of the English language”… Whatever that might mean…

      Second, could you (if you’re kind enough) enlighten me: why am I an idiot?
      Is it because:
      a) of the words I’ve used?
      b) my poor grammar?
      c) despite all of the above, I still make a good point that touches some of your sensitive spots?
      I could’ve easily accepted you calling me a jerk or an a$$, but idiot? I don’t think so! :)

    • Web010

      I agree, but people coming here don’t care where from the idea about this came.

      They are here to learn to code.

      And they aren’t here to listen to someone like you, that’s for sure.

  14. I think it is a nice idea but not much use in reality.

    1. You would have to use an input field which is in password mode if js is turned off (right now it displays it in blank)

    2. If you have someone sitting next to you who nows your moms first name and sees all the letters one after the other
    he knows your password,
    because not all of your user will have secure passwords like “kg23324#6rg”

    And I do not misstye often.

    Nice idea though, useful on a cell but not on the internet, I would say.

  15. Ben

    Hey Chris, ever think of changing your site’s name to jQuery-Tricks?

    Just a thought :)

  16. Cool idea. Although I noticed that if you type too quickly in the first example, the letter popup can’t keep up (probably because of the animation slowing it down slightly).

  17. Jonas Duri

    Hi Chris, wouldn’t it be very cool to put a little flash box next to the “Submit Comment” button which shows a couple of letters just typed with a nice fade in ? It would give the user a feeling of writing with a typewriter.

  18. Excellent link profuitu, I like this a lot: http://www.viget.com/advance/password-fields-are-annoying/

  19. COdieq

    absolute genious of an idea, Ill be implementing this into my future sites, thankas.

  20. Jack Feefofe

    I honestly don’t think that it will cost you any profit. Most computer users are so used to having to enter passwords, they don’t even think twice about it. And if the user would mistype their password, I do not think that they will blame it on the company / website. When the user is creating an account, they probably wouldn’t even know that this feature is available. I highly doubt that the password field would affect someone’s decision to use a service.

    I think that it would also NEED a checkbox to turn this off. If you are at your personal computer, you most likely have your passwords saved in your browser. And if you’re not at your own computer, chances are that someone else is around and could be watching your screen, especially if you are giving a presentation.

  21. Andy
    Permalink to comment#

    My view is that this works on the iPhone (and other mobile devices) but doesn’t translate too well to desktops or even laptops.

    The reason?

    It works on mobile devices because they are small, and as a result, the keyboard is so close to the screen you can easily see the password feedback as you type.

    When I tried the demos that you linked to from my office computer, the first thing I noticed is that, because I can’t touch type, it was much slower to input my password. In order to take advantage of the feedback I had to look up to the screen and then down to the keyboard. Although that delay is marginal, I can’t help but feel that it would prove to be a worse user experience than the one it was intented to improve.

    Based on my own habits, I doubt I would even notice whether a password field masked or not. At least not until I have completely typed in my password and look back up at the screen.

    • Rob
      Permalink to comment#

      I agree – this is exactly what I was going to say. On a desktop PC, when I type a password it’s the only time I actually look at the keyboard and not the screen. Passwords are by their nature all obfuscated and unusual.

      Sorry to say I find this more of a gee-whiz gimmick than a practical idea, at least in a desktop environment.

  22. I prefer to be able to toggle visibility of the whole password. I have made a script to do that:

    http://jaron.nl/blog/2009/how-to-unhide-passwords-on-your-site-and-everywhere-else/

    it adds a link “show passwords” after each password field, and toggles the visibility state of all passwords on the page. I’ve als created a bookmarklet and a greasemonkey script which do the same thing, which you can use to view passwords on any site.

  23. Nice tutorial….although a timeout in the second demo would be good of like two or three seconds….and then it should turn into the password bullet…

  24. ick I hate that function on the iphone, its clunky and if someone wants to get your password by peaking they will get it anyway. Personally I find it more annoying that cool. even though it is a really neat concept and I could see it working in certain situations.

  25. Cool Effect! Surprisingly Simple too!

  26. My personal opinion is that these methods go against the whole point of a password field.

    Although harder than a normal text field, they make it easier for people to see your password over your shoulder.

    I’d probably prefer a toggle option, or nothing at all. As someone above said, people are used to entering passwords in the traditional fashion an don’t have a problem with it.

    I think it’s more important to provide a quick, clear way of telling users they’ve input an invalid password and asking them to input it again, providing a “lost password” feature and telling them exactly what they’ve done wrong (not just “Invalid username / password”).

  27. arkangyl
    Permalink to comment#

    This demo doesn’t appear to work in FF3.5. Anyone else having this problem?

    • Simple and nice effect! I never thought about using something like this, although I’m aware that the iPhone uses this. To be honest, I never thought of this whole thing as a usability issue. I always thought of it as a straight security issue. Needless to say, this is still a pretty cool add-on.

  28. prafuitu
    Permalink to comment#

    First off, I’d like to apologize to all the readers (maybe excepting Caleb :P )! That message wasn’t meant for their eyes. It was meant for the publisher of this article only. However, he decided to approve the comment, despite all the profanities my limited knowledge of the English language allowed me to use in it…

    @Mark Gibbens
    Yeah, it is… You can’t handle paste/copy/cut events in JavaScript! …At least, not in a consistent, cross-browser way. :| Also, it’s hard to handle editing text at another cursor position except when it’s at the end of the string.
    All these would only get you in more problems then you are now, making room for a whole other bunch of errors and problems.
    Things like this would be better if implemented at browser level. that’s why I never finished that firefox plugin… Which, by the way, is a little bit more advanced than this script, handling all editing, at any cursor position, with any amount of text selected and overwritten, except for the cutting and pasting…

  29. Alexis
    Permalink to comment#

    It shouldn’t be a standard, though.

    Others could still peek easily.

    I always kinda hide my iPhone whenever I’m typing my password from people.

  30. This is amazing, thanks! Where was this script three months ago?

  31. Unless you want to lose users, don’t use the dPassword plugin. In fact, don’t use anything. This is for the browser/OS to worry about! It’s simply not our concern.

  32. Permalink to comment#

    Yeah, I think Nielsen’s quite plainly wrong on this one. Besides, looking at your fingers is a magical way to tell what buttons you’re pressing. (Hey, it’s got cross-browser support, is backwards-compatible, doesn’t require a code library..) Same goes for every input method, except something like, yes, mobile devices, which are prone to erroneous entries.

  33. Nice demo’s, they certainly work very well. The thing with the iphone password interface is that it is a personal device where the chance of people watching your screen is smaller and can easily be hidden from prying eyes if necessary. Having this kind of interface on a desktop, would make it much easier for people to view your password.

    This may not be an issue to people who work on their computer alone. However, with regards to people who use their computers in the public domain such as retail. This system would expose huge vulnerabilities.

    I think the answer is to possibly give the user the option as this would improve usability.

  34. Hi. Great plugin!
    I’ve made another iPhone-like feature: x-button in text input. Check my example
    here: http://vremenno.net/examples/x-button-on-text-input2/

  35. As a user, I’d be not so happy to have to show my password to anyone lookin at my screen. As such, I wouldn’t recommend implementing this for my client’s sites…

    That said, it’s a nice trick, if just for fun ^_^

  36. Permalink to comment#

    Intuitive and simple.

  37. I don’t see the need to change the way we handle our passwords on the web.

    We’ve been doing it this way since ever and it works fine. It’s secure and if you want to avoid typing the wrong character is as easy as looking at the keyboard while you input you password. In fact there’s no need to look at the screen while yo do this having in mind that you’ll only see stars, asterisc, bullets, etc.

    Don’t you think?

  38. I too am going to have to be a party pooper on this one. Just like some others have mentioned, mobile devices are much smaller so it works on them.

    According to me the first example is a disaster! The characters are shown so big that people sitting meters away could see it!

    I definitely wouldn’t recommend implementing this on any site/application.

  39. I dont see the downside to this, I think it’s very neat and will work wonderfully for signup provess. Perhaps the flashing version does show up too big, but it is customizable! I like..

  40. Permalink to comment#

    I read the Nielsen post about password masking and found it to be massively obtuse. His proposed solution was so ridiculous that it caused me to write a response to the notion on my blog.

    This solution however, is to all intents and purposes, perfect. People looking over your shoulder will only see one letter rather than the whole password and the user is confident that their password is being handled in a secure fashion. I’ll be implimenting this solution the next time I code a password field.

    Thanks very much for this.

  41. Permalink to comment#

    On a side note, this isn’t an original solution with the iPhone. Simbian phones have been doing this for years. I remember seeing it on my old Nokia 6600 and I’m sure it wasn’t new then, either.

    • Even before that – I remember my first phone, prior to Nokia using the Symbian platform, employing this method of character masking.

  42. psihoxxx
    Permalink to comment#

    i belive that ppl who use computers should know at least a little bit about the stuff

    so feeling insecure or less confidet is not our worry with things like passwords doesn’t fall into my category – it should be secure and displaying what u type is ba practice in that area … maybe if the user had a checbox search … but making it a default (even if it only shows the last letter) – well maybe on less secure stuff like forums etc. it could work :P

  43. Matt Emery
    Permalink to comment#

    I prefer the option of putting a checkbox underneath the password field, with the label saying “display password”.

  44. I’m think it’s only for mobile device, everybody don’t want display pass in public.

  45. chris
    Permalink to comment#

    just want to point out that (at least the iphone) password doesn’t have a default delay or such. you see the cleartext letter whilst key is pressed. this makes it a bit harder for people looking over shoulder, as typing speed varies during entry, hence previous letters are hidden also at varied speed.
    cheers

  46. Not a big fan of this. It does look pretty nifty but I often find myself entering passwords in front of other people for various reasons (if working alongside someone). I would be very conscious of them being able to see my password this way.

  47. Junior
    Permalink to comment#

    Just had this discussion with a site I’m doing UI for. My thoughts:

    - phones are not a keyboard and web browser. With a phone you would have to be very careless to let someone see your password. Not so on a 400inch monitor

    - you can’t think only about security with this. Younger people will dig the iPhone approach, but many people have been seeing their passwords masked for ten years or more. They will be confused, even worried. Illogical? Who cares…they are the user. If you doubt this, sit in on some user testing some time.

    - the checkbox idea is poor UI as well. It’s another decision for the user that may confuse them without a lot of explanation.

    - for first time entry, use the password confirmation field. This is generally only used once, so why all this concern over a single use. If it is for logging in…sorry, but if people don’t know what they are typing I doubt they will even remember the password to begin with.

This comment thread is closed. If you have important information to share, you can always contact me.

*May or may not contain any actual "CSS" or "Tricks".