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 ent

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

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 4

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.

Answer 5

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');
  }
});