Inhalt

07.07.2009  ·  Stefan Ullrich zu den Themen Formulare, iPhone und jQuery. Kommentare 73

iPhone-like password fields using jQuery

or: Delayed password masking with JavaScript.

This lib is deprecated. Sorry.

Jakob Nielsen recently asked us to Stop Password Masking:

Usability suffers when users type in passwords and the only feedback they get is a row of bullets. Typically, masking passwords doesn’t even increase security, but it does cost you business due to login failures.

- useit.com/alertbox/passwords.html

He suggests using plain text input fields by default and offering a checkbox to have the passwords masked.

We do not completely go for the idea of typing passwords in plain text by default as there will be a loss of security! Not a technical one, but a user-driven one.

Password fields on iPhone/iPod touch

iphone-passwordOf course Nielsen is right when he talks about users making more errors and feeling less confident when they can’t see what they’re typing while filling in forms. That may have been the reason why Apple developed implemented an alternative method on iPhone/iPod Touch: passwords get masked while typing but the last character in row is shown in plain text. Compared to common password fields on the web this method improves usability, not only on mobile devices. And concerning security risks you’ll probably need James Bond behind your back looking over your shoulders in order to let your password be captured.

So, this method looks to be a pretty good way of typing in passwords, and that is why tried to use it on web forms. It comes as a jQuery plugin which works unobtrusive. Non-JS users get the common masked password fields.

Copy & paste will work as usual. The only thing that will not work is: deleting/inserting single or multiple characters from the beginning/middle of the masked password string.
But, let’s face it, who will do that?

Live demo

show password

Features

  1. Doesn’t need any HTML modification as it finds password fields by type.
  2. Unobtrusive: Non-JS users get the common masked password fields.
  3. Supports copy & paste.
  4. Options: Interval, delay, replacement character, prefix, debug mode.

Instructions

It’s very simple.

  1. Just load jQuery, of course ;-).
  2. Load the Plugin
  3. and then initialize dPassword.

You are done!

<script type="text/javascript" src="/js/jquery.js"></script>
<script type="text/javascript" src="/js/jQuery.dPassword.js"></script>
<script type="text/javascript">
  $(document).ready( function() {
    $('input:password').dPassword();
  });
</script>

There are some options you might want to configure:

  • interval
    Time in msec the scripts checks for newly entered characters.
  • duration
    Delay in msec of converting the last entered character.
  • replacement
    The character to be replaced, for unicode characters use the following format: %u25CF
    You may check these ressources: Overview of unicode characters or a more comprehensive overview.
  • prefix
    This is the prefix of the newsly generated elements. Default is password_.
  • debug
    For debugging issues. You need FireBug enabled!

Example:

<script type="text/javascript" src="/js/jquery.js"></script>
<script type="text/javascript" src="/js/jQuery.dPassword.js"></script>
<script type="text/javascript">
  $(document).ready( function() {
    $('input:password').dPassword({
      duration: 2000,
      prefix: 'my_'
    });
  });
</script>

Known Issues

  1. Adding/deleting chars from the middle doesn’t work. Works at the end of the password only.
  2. View will not follow cursor if input field is too small.
  3. If #id based CSS styles are assigned, these styles will not be taken over.

Download

defaultlogo

Project page with SVN repository: http://code.google.com/p/dpassword/
JS download: jQuery.dPassword.js
Complete ZIP download: dpassword.zip

Kommentar hinterlassen  //  RSS-Feed mit Kommentaren zu diesem Beitrag Feed

73 Kommentare

  • 1

    Gregorio Espadas 

    Another issue: If I type something in the middle of the entered password text, the insert point (blinkin’ cursor) jumps to the end of line.

  • 2

    Stefan Ullrich (Autor)

    Hi Gregorio,

    thanks for your feedback. This and the other issues are on our todo-list for the next version ;-)

  • 3

    Chris 

    not really an iPhone only handling. At least Series 60 handle Password fields similar. Probably all mobile phone do that.

  • 4

    Dirk Schürjohann (DECAF)

    Chris, you’re right. Even Nokia did this years ago.

  • 5

    Tim Wright 

    Good work gentlemen, I’ve been hoping someone would put this together since I read Jakob’s post. Thanks!

  • 6

    Tim Gieseking 

    Will browser-saved passwords work as normal? If they do, and my password auto-populates, couldn’t a guest using my computer could click “show password” and see my password (assuming that link is included by the site developer)?

  • 7

    Ben Czajkowski 

    While this is nifty and a great proof of concept, anyone browsing with JS turned off sees a plaintext password field.

    And anyone using a public computer (library, internet cafe, etc) could have their password glanced at or guessed by people with good eyes.

    So, I don’t know about the security aspects of a script like this.

    Nifty, though, and again, a great proof of concept :)

  • 8

    Karsten Rieger 

    Nice Work!
    But to be honest, I don’t see any advantage for the user here. I would rather prefer a checkbox to toggle the masking of the password, like the one you find on OS X for the WPA-Key in the network settings.
    Why? Well, the only usecase when I want to see the unmasked password is after I typed it in and quickly want to make sure I did not mistype.
    It’s quite simple to implement. I’ve done an example here. I haven’t checked crossbrowser compatibility yet, because it was done while writing these lines. But I guess you get the idea – it comes close to what Nielsen wrote, just that the passwords are masked by default. The user can take care of unmasking the password when he is sure that no one is behind his back. And as Nielsen wrote too: “Give the user the right to decide” – if he wants to publish his top secret passwords, we can’t help him anyway. :-)

  • 9

    Alan Hogan 

    I hate to be a Debbie Downer.

    But this isn’t as good an idea as it sounds.

    Observation 1. Password masking is designed to prevent shoulder-surfers from observing passwords.

    Observation 2. It’s a lot harder to view the screen of someone’s mobile device/cell phone as they are using it than a desktop/laptop.

    Observation 3. Mistakes are made on real keyboards and on the iPhone, but they are easier to make on the iPhone.

    Observation 4. No site visitor will expect this plugin to be active the first time they encounter it, if ever.

    Conclusion 1. The code on this page defeats the purpose of preventing shoulder-surfers from discovering passwords.

    Conclusion 2. If Apple thought iPhone-style password masking were ideal for the desktop, as well, they would do so on the desktop. They do not. What they often do instead (e.g. when entering network passwords) is provide an toggle (in the form of a “view password” checkbox) so that users may optionally view their password as they enter it. This is a great idea and is much easier to implement than a plugin like this one.

    tl;dr: Don’t use this plugin; consider a view-password checkbox (set off by default) instead.

    Postscript: This code unfortunately does not work in Opera. At all. No masking, and the button does not reveal a password. This makes me think that this is not even as based in jQuery as you indicate, because jQuery is always tested in Opera. Besides, this should fail gracefully; it does not.

  • 10

    Alan Hogan 

    (Addendum to Conclusion 2: This method also solves Nielsen’s legitimate complaint, as a much better alternative to dropping masking altogether.)

  • 12

    Sinan Yaşar 

    Nice work,

    Folks talk about security here, but it always annoyed me to not being able to see the passwords i type, when i switched to mac back in 2007, i have seen that there is a checkbox which says show password and i really liked it.

    Because 99.5% of the time that i spend with computers is with my own computer(s) in office and at home and for the rest 0.5% i don’t think that it’s a good idea to be paranoiac.

    Thanks for the plugin…

    Sinan.

  • 13

    James 

    The point of Nielson’s article was that this sort of thing isn’t necessary – you disagree, but you don’t say why you disagree:

    there will be a loss of security! Not a technical one, but a user-driven one.

    Really? Why? Nielson has a lot of test data to back up his conclusions – what do you have, apart from personal opinion?

    I don’t mean to sound harsh: this is a cool plugin, but I think you need to make a stronger argument for why it’s relevant.

  • 14

    Ewout 

    I think users might not expect a passwordfield to behave like this (they are used to the **-masking).

    It might raise questions like “Is it secure?” and “Why is this passwordfield different from all other passwordfields I KNOW?”.

    Personally I wouldn’t use a plugin like this. Nonetheless; great work :)

  • 15

    Liam 

    Indeed, Security.

    Imagine myself doing a presentation on a beamer. I demo something at school, and suddenly this website has this iPhone-like this on the site. The audience can littetly see what I type (THANKS!).

    It’s a nice feature, and gimmick but as said above. Apple putted it in the iPhone for a reason, and they did not put it in their OS for that same reason; back your shoulder’s :P

  • 16

    Dirk Schürjohann (DECAF)

    Thank you all for your feedback, we appreciate it!

    #6 Tim G.: Browser-saved passwords work as normal. If there’s a link »show password«, it will be shown as plain text.

    #9 Alan: Should work fine in Opera. We tested both 9 + 10, Mac and Win. @all: Anyone else having problems with Opera?

    #11 Oliver: Good to mention your plugin! You check on keypress while we do the interval method.

    #13 James: It’s our personal opinion, right. We didn’t run any usability tests. But I think he did neither. At least I can’t imagine him standing behind the probands looking over their shoulder and tell them to type in their password now ;)

  • 17

    Hadrien.eu 

    Very bad idea to propose this for classic browser. This concept is only neeeded to help not to make an error with touch keyboard. And a phone screen can easily be hidden from other people around. But on a computer, you have a real keyboard : making a mistake is more difficult. And a lot of people could see your typing on your 24″ screen.

    (sorry for my bad english, I’m french…)

  • 18

    Peter C 

    The last character typed should mask after x seconds, or when focus is removed from the password field.

  • 19

    Jeff S 

    Nice idea – but breaks in a couple of places. If the password contains a single quote (‘), the password is no longer masked after the character, and show password only displays what came after the single quote.

  • 20

    Tomas Sedovic 

    Bug obvervation: when you type a passphrase long enough to overgrow the textbox space (not unheard of), the functionality breaks.

    The last character is no longer shown. Instead, you see only textbox full of asterisks (or whatever obscures the letters).

    Other than that, like the idea. Still think the “show password” checkbox is the way to go, though.

  • 21

    Dirk Schürjohann (DECAF)

    Bugfixing:

    #18 Peter & #19 Jeff: Good points, thanks! We’ll fix that.

    #20 Tomas: The clipping of the text field you mention will be fixed in the upcoming version. Thx!

    Again, thanks to everyone discussing the plugin!

  • 22

    Awesomedude 

    The concept is great. I always had a problem when in a DEMO of one of the apps I’m working, I have to type the password in a big screen and everyone is watching every letter typed.
    Other than that I like the way it works.

  • 23

    Jimmy Liew 

    Good work! Keep it up. I am looking forward to see more product from you.. :D
    You impressed me..

  • 24

    Kevin Fairchild 

    When typing the password, the last character is shown unmasked as expected. When the backspace key is pressed and the last character is deleted, the new last character remains masked. Is this a bug or by design?

    — Kevin Fairchild

  • 25

    Stefan Ullrich (Autor)

    Hi all,

    the point with the beamer is really not the best example for this plugin, I have to admit. We will add a workaround in the upcoming version, so stay tuned ;-).

    #24 Kevin: This is the expected behaviour. Only new characters are “shown”.

  • 26

    Stevan Majstorović 

    Here you can find another (my) simple solution to have password (un)masked with an checkbox.

  • 27

    James 

    I don’t mean to burst any bubbles but this is almost entirely impossible given the current DOM API. It’s only possible on the iPhone because it’s achieved through a low-level control.

    Given all the different possible methods of input and the possibility of deletion/addition to the field there really is no solid way to do this.

    You claim it’s not important but it really is. You can’t just use a half-working one… You’re making it even worse than the current status quo.

    Also why are you using an interval? Why not the keyup/keydown events?????

  • 28

    Dennis Harbecke 

    @James:

    Because copy/paste – if you copy your password and paste it into the password field, you will see the whole text in plain.

    So the interval method is the better one ;)

  • 29

    Dirk Schürjohann (DECAF)

    #27 James: I think you’re right about it is the browser’s job to do such things. Actually, priority may be like this: system/GUI > browser > browser addon > JS/DOM > HTML.
    But obviously there isn’t any browser-side masterplan for demasking passwords right now, and we were curious about giving it a try on the client-side.
    So, this one is a proof of concept. And it sort of works for me. The upcoming version of the plugin will be able to handle the current issues (insert/delete, focus, styles). It will even be able to deal with beamers and public screens, as there will be a discreet way to turn off the demasking.

    Thanks for your comment!

  • 30

    Eduardo Sada 

    My password is
    'hello'
    (with quotes) and doesn’t work :D

  • 31

    Dirk Schürjohann (DECAF)

    #30 Eduardo: We’re working on that issue :) Thanks for the hint!

  • 32

    SamC 

    After applying dPassword
    $(‘input:password’).dPassword();

    jQuery focus will not focus
    $(‘input:password’).focus();

    does nothing.

  • 33

    Stefan Ullrich (Autor)

    #32 SamC: Actually, we hide the password input field and add a normal ‘text’ field (to be able to disable the chars). So your call will set the focus to a hidden field. Just use the ID instead. Perhaps we will add a direct focus option in the upcoming version. Thanks for the hint.

  • 34

    Ben 

    Great work you are doing here – absolutely love the plugin. I was just wondering if anything is going to be done about the ‘ problem?

  • 35

    Dirk Schürjohann (DECAF)

    #34 Ben: Thanks for your feedback! Upcoming version of the plugin will be released within a week. It’s gonna fix the issues very well :)

  • 36

    Sekar 

    really nice one.. keep it :)

  • 37

    Sam 

    After applying dPassword
    $(’input#password’).dPassword();

    jQuery focus will not focus on the dPassword text input field
    $(’input#password_password’).focus();

    does nothing.

  • 38

    alex 

    here is another implementation

    http://ipasswordbox.philgounbin.com/

  • 39

    antony 

    I like iPasswordBox more, it works correct with copy paste operations

  • 40

    Frank Koehl 

    This is a neat approach, but I find it to be a bit of a half-measure. Like Alan Hogan said, people looking over your shoulder can still follow the characters and memorize them as they come up.

    If the user is in a secure physical location, I prefer to simply go full-monty and let the user see their whole password. See this link for an example:

    https://fwdvault.com/register

  • 41

    Dirk Schürjohann (DECAF)

    #38 alex: A really nice one! (And you did it in march.)

    #40 Frank: Thanks for your feedback! The upcoming version of the plugin will be able to switch off the delayed masking.

  • 42

    Al 

    @antony

    the problem with ipasswordbox approach is that turning off javascript turns off masking completely.

    With this approach turning off javascript still gives you the normal password field where everything is masked.

  • 43

    stoimen 

    Great tool!

  • 44

    Sty Light 

    Dear Stefan,

    I believe the functionality your code offers is very usefull.

    I tried this code for few days and decided to (temporally?) remove it, as it seems to have few problems:
    – It disables the autocpmlete functionality (I checked it in FF 3.0)
    – It create a JS error at the initialization phase if the ‘password’ input field is hidden (the problems seems to be in function _cloakInput(keepRange) )
    – The ‘show password’ workd fine only after two clicks.

    I will be happy to reinstall this code, if you can fix these isssues.

    Regards.
    Sty

  • 45

    Sty Light 

    Oops… wrong email

  • 46

    Lochlan 

    Hi,

    I had a problem with it not working in IE7 (or at least IE8 in IE7 mode). I fixed it by going to line 264 and adding a comma.

    newInput.css('height'<strong>,</strong> (_input.get(0).clientHeight - 2*parseInt(_input.get(0).currentStyle.padding, 10)) + "px");

    Cheers.

  • 47

    PHPQA 

    A really good application. but some times its got stuck. I hope it will solve on next release

    Thanks

    http://phpqa.blogspot.com

  • 48

    Stefan Ullrich (Autor)

    Thanks Lochlan,

    I just fixed it in the repository.

  • 49

    Jai 

    Interesting plugin. Though i like it, i am not convinced with the “Show Password” option. Have reviewed your plugin @ http://www.ajaxdump.com – check it out…

    http://ajaxdump.com/2009/08/22.....ry-plugin/

  • 50

    Jason 

    I tried using your password plugin, but I don’t see a way to get the un-masked value? When I submit the form my JS only sees the value as the masked characters no matter what I seem to do. I’m tried getting the value using .val() and I’ve tried looking for a field called password_myOriginalPasswordFieldHere.

    How do I get the actual value that the user entered?

  • 51

    Dewey Bushaw 

    Is there anyway to get the last character to switch to a masked bullet, it just seems odd that it hangs there. I know the iPhone does not do this.

    Thanks,
    Dewey

  • 52

    Oliver Mezquita 

    Very nice plugin! I’ll give it a try.

  • 53

    Matthew Fedak 

    Very nice idea, god bless the iPhone, its not just a phone its a concept and from it even the typical web developer has been made to learn something new about usability.

  • 54

    Steven L Braun 

    I use 1Password. Duh.

  • 55

    Dan 

    This is a slick plugin but I cannot and will not agree that password masking, in the traditional sense, is as arbitrary as Nielsen says it is. It has become the norm because it is not only simple to implement but is also, and this is the biggie, more secure than any solution that displays the characters in any way.

    The real, practical security edge that traditional masking gives over the type of masking in this plugin is minor, I’ll admit. However what Nielsen ignored is the fact that what people expect to see counts for a lot. Having a password field behave differently to how they have become accustomed to over years of web use can, and often will instill a sense of distrust in the website or service. I’ve seen it happen. I’m web and tech savvy and even I don’t like it. I feel less secure if my password is revealed, even on my own computer and I’m alone in the room.

    I sure as hell wouldn’t be happy using a site that held any remotely sensetive information (yes, that includes Facebook and Twitter) about me if I found that my password was revealed, even only one letter at a time, on anything other than a mobile phone. Hell, I don’t even like the fact that mobiles do it but I appreciate that there is a genuine need there (i.e. non-qwerty keyboards for entering text)

  • 56

    ahayek 

    Please make default value for password input possible !

    initiliase the password field with a default value !!

  • 57

    Chris 

    Like Jason, how do I get the actual value during jQyert event keyup?
    BTW, I love this plugin…

  • 58

    Stuart M 

    Hey,

    To get around the issue of middle characters not working replace the following:
    var onclick = “””;
    //under declatations

    ‘onclick=”this.value=’ + onclick + ‘” ‘ +
    //for the text field

    This will clear the value on click, using standard java. Simples :-)

  • 59

    Olivier 

    Did anyone try to combine this great plugin with the Validate plugin?

    Well I did, and basically, it does not work, except for the required class.

    If someone’s got a “ready to go” solution for registration forms where users are asked to enter a password twice for confirmation, I would greatly appreciate.

    Friendly Regards all.
    Olivier

  • 60

    Nilpo 

    Where is the lock.gif file?

  • 61

    360 

    Very good. thanks!

  • 62

    ivan ling 

    Entering password and then submitting the form via ENTER key is
    broken.

  • 63

    IE5.5 

    This function cannot be used by IE5.5.

    IE5.5 OUT (>_<)

  • 64

    Timmy 

    I really like the idea of your plugin. Nevertheless, the challenge of writing it was much more interesting to me, so I’ve written my own version…
    demo:
    http://timmywillison.com/samples/password123/
    github:
    http://github.com/timmywil/password123

    It still supports pasting into the field, is unobtrusive, and has the same options minus the interval change and debug mode, which I didn’t really want to put in there, but it would be easy to add. It also supports adding/deleting from the middle and the cursor position stays the same even as the values are masked.
    This was harder than I thought it would be.
    Thank you for the inspiration.
    Timmy

  • 65

    Brett 

    Hey just a heads up–your demo is broken. Javascript error. I would like to use your plugin, but I’m not going to bother downloading it when the demo doesn’t even work.

  • 66

    Greg 

    Works good, except for a small issue.
    Seems the text box is locked from any validation. For example … an asp.net required validation control will not fire when the textbox loses focus. Also, a compare validation will not fire when control loses focus. I tried a jQuery blur() function and it won’t fire either.

    Any help or ideas ??

  • 67

    Greg 

    The reader “Dan” had some comments on the idea of changing how a password field should be seen, and he was very adamant on keeping the status quot.

    I disagree … the masked password field is a hold out from another era. We as developers need to guide users into using what is best for them. Also, if you’ve done any kind of usability studies you’ll see that most web users are not tech savvy and are frustrated with not knowing if they put in one password or another. The phone style password mask is a great compromise from a full mask to a plain text box, especially with more and more of those non-tech savvy users using phones and getting used to them. It makes entering a password easier and more accurate, which will make that user more likely to come back to your site. That alone is worth the change …

  • 68

    Tony 

    Nice work.

    I’d like to report some issue with the firefox integrated password manager. When there are multiple passwords stored for the same site, the password will be entered from firefox after selecting the corresponding username. The password is entered in the password-field but not in the replacement input field.

    Hope for a fix.

  • 69

    Stefan Ullrich (Autor)

    Acutally, we got many comments here, but due to timing issues on our side, there will be no update in the near future. Sorry!

  • 70

    keith 

    Thanks for the simple plug-in – works great!

    One thing I noticed was that if you cleared a required field and fired validation the masking stopped working (FF6x). So I noticed this corrects that (create another blur event – to reapply)
    $(‘#YourField’).blur(function() {
    $(‘input:password’).dPassword();
    });

  • 71

    keith 

    and for good measure – should you have several related layers
    click event
    $(‘#yourField’).click(function() {
    $(‘input:password’).dPassword();
    });

  • 72

    Jed 

    Thank you very much. Just what I need for experiment.

  • 73

    madn 

    not working with other jquery versions

(Kommentare geschlossen.)

banner