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

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