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:

  1.  
  2. <input value="Username" name="username" type="text" />
  3. <input value="Password" name="password" type="text" />
  4.  

Which looks like this:



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

  1.  
  2. onfocus="this.value=''"
  3.  


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:

  1.  
  2. onfocus="this.value='';this.type='password';this.focus();"
  3.  

Cool. But it doesn’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:

  1.  
  2. onfocus="this.value='';this.type='password';this.select();"
  3.  
  1.  
  2. <input onfocus="this.value=''" value="Username" name="username" type="text" />
  3. <input value="Password" name="password" type="text" onfocus="this.value='';this.type='password';this.select();" />
  4.  


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 Magazine’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.
http://www.smashingmagazine.com/2009/12/16/stronger-better-faster-design-with-css3/

One Reply to “Problem with input focus on Safari”

Leave a Reply

Your email address will not be published. Required fields are marked *