JQuery - Valor default en input text

Muchas veces hemos visto que en algunas páginas los espacios para escribir contienen un valor por default algo así como "Escribe tu nombre aqui..." y al hacer click en el campo este valor desaparece si es que  introducimos un valor en el campo, en caso de que lo dejemos en blanco se vuelve a poner la leyenda.

Bueno esta funcionalidad es propia del lenguaje "JavaScript" y es muy fácil de hacer, solo debemos controlar algunos eventos, sin embargo, para hacerlo les sugiero usen el framework jQuery, ya que se ahorraran bastantes lineas de código.


Comencemos. Suponiendo que tenemos una etiqueta con el campo nombre y apellido, del siguiente modo:

<input id="firstname" type="text">
<input id="lastname" type="text">

Para estas etiquetas tendremos que controlar los siguientes eventos: onblur y onfocus.

Usando Javascript nuestro código quedaría del siguiente modo:
<script>
   //codigo para firstname
   var firstname=documment.getElementById("firstname");
   firstname.value="Escribe tu nombre...";
   firstname.onblur(function(){
      if(this.value=""){
         this.value="Escribe tu nombre...";
         this.style.color="#A5A4A4";
      }
   });
   firstname.onfocus(function(){
      if(this.value="Escribe tu nombre..."){
         this.value="";
         this.style.color="#000000";
      }
   });

   //codigo para lastname
   var lastname=documment.getElementById("lastname");
   lastname.value="Escribe tu apellido...";
   lastname.onblur(function(){
      if(this.value=""){
         this.value="Escribe tu nombre...";
         this.style.color="#A5A4A4";
      }
   });
   lastname.onfocus(function(){
      if(this.value="Escribe tu nombre..."){
         this.value="";
         this.style.color="#000000";
      }
   });

</script>

Usando jQuery nuestro código quedaría del siguiente modo:
<script>
    //codigo para firstname
    $("#firstname").val('Escribe tu nombre...');
    $("#firstname").css('color','#A5A4A4');
    $("#firstname").blur( function(){
        if(this.value==''){
            $(this).val('Escribe tu nombre...');
            $(this).css('color','#A5A4A4');
        }
    });
    $("#firstname").focus( function(){
        if(this.value=='Escribe tu nombre...'){
            $(this).val('');
            $(this).css('color','#FFFFFF');
        }
    });
   
    //codigo para lastname
    $("#lastname").val('Escribe tu apellido...');
    $("#lastname").css('color','#A5A4A4');
    $("#lastname").blur( function(){
        if(this.value==''){
            $(this).val('Escribe tu apellido...');
            $(this).css('color','#A5A4A4');
        }
    });
    $("#lastname").focus( function(){
        if(this.value=='Escribe tu apellido...'){
            $(this).val('');
            $(this).css('color','#FFFFFF');
        }
    });   
</script>

Ejemplo: