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

HTML:

jQuery:

$('input.username')
.focus(function(){
  var $this = $(this);
  if ($this.val() == $this.attr('title')) {
    $this.val('').removeClass('dimmed');
  }
})
.blur(function(){
  var $this = $(this);
  if ($this.val().length == 0){
    $this.val($this.attr('title')).addClass('dimmed');
  }
});

CSS:

input.username {
  color: #000;
}
input.username.dimmed {
  color: #888;
}