Problem with input focus on Safari

I had a javascript hic­cup, and I think the solu­tion may be help­ful to oth­ers.

The basic set­up is this:

Lim­it­ed space means no room for labels in a login form. So instead we used a pre­set val­ue in the input ele­ments, like so:

Which looks like this:

The easy way to blank out the descrip­tive text is to use the onfo­cus event like so:


But this is not enough for the pass­word input, because we do not want to reveal a user’s pass­word as it is typed. We must change the input type to pass­word. This caus­es the input ele­ment to lose focus, so we set it again after chang­ing type:


Cool. But it does­n’t work in Safari. Tab­bing from the user­name field to the pass­word field does not work as expect­ed. The input ele­ment looks focused but it won’t accept any key­board input until you click in the field.

Solu­tion — use the select method instead of focus:


I hope that helps some­body out there in Google-vania.

[UPDATE 22 Feb 2008] Well, it turns out that this works well for Safari and Fire­fox, but breaks in ie/win (shock­er.) so I was forced to go anoth­er route. Inter­net Explor­er will not allow you to change the type of an input ele­ment with Javascript, so I made the input a pass­word ele­ment to begin with. Using css, set a back­ground image that says “Pass­word” and then, on focus, remove the back­ground image. Voilà. [UPDATE 16 Dec 2009] I just came across a very inter­est­ing tech­nique on Smash­ing Mag­a­zine’s blog. It involves plac­ing a field­’s label behind the field and fad­ing it on focus. The label does not dis­ap­pear com­plete­ly until the user actu­al­ly starts typ­ing. Very ele­gant solu­tion and it min­i­mizes cas­es where a user may for­get what a field­’s pur­pose was because the descrip­tive text has dis­ap­peared.

One Reply to “Problem with input focus on Safari”

This site uses Akismet to reduce spam. Learn how your comment data is processed.