How can I implement Stack Overflow-like watermarks in forms?

Question

I remember seeing a tutorial somewhere that talks of how to style your input forms in a more “usable” way.

Essentially, you have a placeholder value and when you enter the input, it hides the hint so to speak.

Now, just to be clear: I don't want the hint (placeholder value text) to disappear on focus, but rather to go lighter when I first start typing something. Good examples:

• Check out the forms on Aardvark. This is exactly how I wish to have my input forms.

• Our very own Stack Overflow — when you try to ask a question, on clicking inside any input form, it doesn't hide the text right away. You see your cursor as well as the hint. but when you start to type, it hides the hint. (I would prefer having it go to a much lighter shade rather than hiding all together though, like the above Aardvark example.)

I remember very clearly reading a tutorial somewhere on the interwebz with this exact requirement, but darn, I forgot to bookmark it.

Any suggestions/links?

[Update: I recently found a jQuery plugin In-Field Labels that does exactly what i want. Also, here's the link to an improvement of the same plugin. ]

Answer 1

You may want to start from this:

<input type="text" value="Your Hint Here"
       onFocus="if (this.value == 'Your Hint Here') this.style.color = '#ccc';"
       onKeyDown="if (this.value == 'Your Hint Here') {  
                      this.value = ''; this.style.color = '#000'; }"> 

You should probably tweak the above to use JavaScript functions in such a way not to repeat your hint string three times, but I hope this can get you going in the right direction.

I also noticed that the "Join Now" forms at vark.com also set the cursor position to the start of the text box instead of leaving it at the end. This can be bit tricky to make it work cross-browser, but you may want to check the solution proposed in the following article by Josh Stodola:

• Setting Cursor Position in a Textbox or TextArea with Javascript

Answer 2

HTML5 has the placeholder attribute, which is designed for this very task.

Only WebKit (the rendering engine used in Safari and Google Chrome) supports it so far though. You’ll want a JavaScript fallback like Daniel’s for when placeholder isn’t supported.

It’s trivial to check for placeholder support in JavaScript.

Answer 3

An input field cannot have both default text and user-entered text at the same time. The only possible way to achieve exactly what you are asking is to have a background-image on the input fields with an image containing the default text you wanted to display but I highly recommend against this as two layers of text will be very confusing for the user. The most common way to achieve this (and what is done on your example site vark.com) is to use the focus method to clear out the text:

$('#my_input').focus(function() {
  if($(this).val() == 'default text') {
    $(this).val('');
  }
});

To achieve it the way StackOverflow (and Vark.com's signup form) does you can use the same method with the keydown event:

$('#my_input').keydown(function() {
  if($(this).val() == 'default text') {
    $(this).val('');
  }
});

To achieve both your color change on focus and text clear on keydown it would be:

// set text to grey on focus
$('#my_input').focus(function() {
  if($(this).val() == 'default text') {
    $(this).css('color', '#999999');
  }
});

// set text to black and clear default value on key press
$('#my_input').keydown(function() {
  if($(this).val() == 'default text') {
    $(this).val('');
    $(this).css('color', '#000000');
  }
});

Answer 4

In response to @Paul's post, I noticed the behavior of the HTML5 placeholder acts strangely on my Android emulator. The placeholder looks great until you click on it and it becomes black with your cursor to the right of the word. Granted, if you type it will disappear, but it's not intuitive. So I wrote some jQuery to fix it (where's my HTML5/jQuery badge?)

$(document).ready(function() {
    $('input[placeholder]').focus(function() {
        if (!$(this).val()) $(this).val('');
    });
});

Answer 5

I wrote this example which I—for lack of a better name—called persistent placeholders.

It requires a little more markup, a div wrapping a label and input, but that solves a lot of other problems (like placeholders getting into your form data or password fields not working) and the actual markup is very clean to read. You end up with something like this:

<div class="input-wrapper">
    <label for="id_username">Username</label>
    <input id="id_username" type="text" name="username">
</div>

and after including the CSS and JS, it just works.