or: Delayed password masking with JavaScript.

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

Of 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

Den ganzen Artikel lesen: »iPhone-like password fields using jQuery«

[DE] Kurze Durchsage: Mit der Veröffentlichung des finalen IE 8 können alle spezifischen IE-8-Styles wieder aus dem flexiblen Formular entfernt werden. Es funktioniert nun ohne Sonderbehandlung fein.

[EN] Short info: Final release of IE 8 makes specific styles for the flexible form redundant. Works fine without special enforcement now.

Update des Ansatzes für flexible Formulare, die nun auch im Internet Explorer 8 (beta) richtig funktionieren.
Approach to flexible multi-column forms

Deutscher Artikel bei SELFHTML: Ansatz für flexible, mehrspaltige Formulare.

English:

Update of the approach to flexible forms, workin’ fine with Internet Explorer 8 (beta) now.
Approach to flexible multi-column forms

Kleines Update des Ansatzes für flexible Formulare, die nun auch wieder im Opera 9 richtig funktionieren.
Approach to flexible multi-column forms

Deutscher Artikel bei SELFHTML: Ansatz für flexible, mehrspaltige Formulare.

English:

Slight update of the approach to flexible forms in order to get Opera 9 working again.
Approach to flexible multi-column forms

Kurze Information: Mein Ansatz für flexible, mehrspaltige Webformulare ist nun Safari 3-tauglich. Das Box-sizing musste lediglich auf -webkit angepasst werden anstelle von -moz.

-moz-box-sizing: border-box; /* gecko */
-webkit-box-sizing: border-box; /* khtml/webkit */

SELFHTML: »Ansatz für flexible, mehrspaltige Formulare«

English:

Quick info: my little approach to flexible multi-column web forms is now Safari 3-ready. Box-sizing simply had to be -webkit instead of -moz.

-moz-box-sizing: border-box; /* gecko */
-webkit-box-sizing: border-box; /* khtml/webkit */

DECAF°blog: »Approach to flexible multi-column forms«