Functino

My daily struggle with webdevelopment

Setting a visible default value for text and password inputs as well as textareas – empty on click

It’s really a simple thing: Give a textfield or a password field a visible default value, if the user clicks on it remove it and let him type… . This “ui-pattern” is often used instead of a label tag. You find it on many sites where there’s little space. Login-Forms with a default value that indicates: “Type your password here” and so on…

I can’t remember how often I needed one of these and everytime I wrote new js-snippets. Now I have created a little class that handles this behaviour for me. It works with both text and password inputs as well as textareas.

You can find it here:

HintValue – Default value for text and password fields

6 ResponsesLeave one →

  1. Manko10

     /  March 9, 2009

    Nice and simple. However could you please turn the spell check off by assigning the attribute spellcheck=”false” via JavaScript to the elements? It looks quite bad when some words of the default value are underlined red.

  2. andreas

     /  March 11, 2009

    I didn’t even know about that attribute. Thanks for the hint, I’m going to add it!

  3. Manko10

     /  March 11, 2009

    Yeah, that’s quite new and has been introduced with early HTML 5.

  4. nik

     /  March 17, 2009

    What about submitted “empty” (but labeled) fields (not required ones)? Do they contain your default values?

  5. andreas

     /  March 17, 2009

    HintValue does not remove the default values on submit. I think that should/could be handled on the server side.

    For now I don’t need that funcionality – perhaps I’m going to add it later :)

  6. nik

     /  October 7, 2009

    The problem with those kind of solutions is: You can’t use the default value as entry. In combination with comment #4 this is a problem, you can not fix without storing the empty status seperately. For me that would be the better way than using the value-content itself.

Leave a Reply