jQuery/javascript - Input fields (user,pass) just like twitter's login?

Question

How can I achieve the same effect like twitter\'s log-in form (the top on the right) - when you click on the username/pass the value \"username\" stays there until you enter tex

Answer 1

I would just use the HTML5 placeholder attribute.

Twitter actually uses spans and styles them in place of the input text box placeholder and would use javascript to remove them on the focus of the input box.

The easiest way of doing this is use HTML5 placeholder with cross browser fallback of modernizr which is this.

To change the style of the placeholder you can do something like this.

input[placeholder]:focus {
  // change style of placeholder on focus
}