El atributo placeholder presente en los campos de texto (o input) de los formularios permite mostrar al usuario un texto informativo que desaparece cuando el campo de texto recibe el foco (el cursor entra en el campo) y vuelve a aparecer cuando el campo de texto pierde el foco y no hemos escrito nada.

Demo

Puedes leer sobre este y otros atributos en el manual de HTML5.

Este atributo ha sido incluido en la especificación de HTML5 que actualmente se encuentra en fase de desarrollo y por tanto no está soportado en todos los navegadores. Google Chrome y Safari ya lo soportan, sin embargo, esto no es así con otros navegadores como Mozilla Firefox 3.6.x o Internet Explorer en cualquiera de sus versiones. Desconozco el estado de Opera con respecto a este atributo.

Aquí voy a explicar como conseguir esta funcionalidad en todos los navegadores usando javascript, concretamente un plugin jQuery que sólo funcionará si el navegador no soporta este atributo.

Funcionamiento del plugin:

  1. Detectar si el navegador ya soporta este atributo. Si lo soporta no hacemos nada más y si no lo soporta continuamos.
  2. Establecemos el valor del campo con el valor del atributo placeholder y le añadimos la clase placeholder.
  3. Al recibir el foco borramos el valor del campo tiene la clase placeholder.
  4. Al perder el foco volvemos a establecer el valor del placeholder si el usuario no ha introducido nada.
  5. Al enviar el formulario eliminamos el valor de los campos que tienen la clase placeholder y borramos el contenido del atributo value para que no lo envie al servidor.

Paso 1. Estructura del plugin

La estructura es la tipica de un plugin de jQuery:

(function($){
  // funcion principal del plugin
  $.fn.placeholder = function(options){
  }

  // dectección del soporte del atributo placeholder

  // función para activar el placeholder en un campo

  // función para desactivar el placeholder en un campo
})(jQuery);

Paso 2. Detectando si el navegador soporta el atributo placeholder

La detección se basa en la técnica mostrada en diveintohtml5. Esta técnica consiste en crear un input via javascript y comprobar si existe el atributo placeholder. Si existe es que el navegador lo soporta.

// Función que detecta si el navegdor soporta el placeholder nativamente
// Extraida de: http://diveintohtml5.org/detect.html#input-placeholder
$.fn.placeholder.supported = function(){
  var input = document.createElement('input');
  return !!('placeholder' in input);
};

Ahora podemos usar esta función en la función principal:

$.fn.placeholder = function(){
  // Ingnoramos si el navegador soporta nativamente esta funcionalidad
  if ($.fn.placeholder.supported()){
    return $(this);
  }else{
    // implementación del placeholder
  }
}

Paso 3. Activando y desactivando el placeholder

Para activar el placeholder añadimos la clase placeholder en el campo de texto y copiamos el valor del atributo placeholder en el atributo value.

// Añade el contenido del placeholder en el value del input
$.fn.placeholder.on = function(el){
  var $el = $(el);
  $el.val($el.attr('placeholder')).addClass('placeholder');
}

Para desactivar el placeholder eliminamos la clase placeholder y borramos el contenido del atributo value.

// Borra el contenido del value
$.fn.placeholder.off = function(el){
  $(el).val('').removeClass('placeholder');
}

Paso 4. Función principal

Como las funciones de los eventos la vamos a hacer directamente en el return de la función primero vamos a crear la función en el evento submit del formulario. El plugin se ejecutará sobre los campos de texto que contengan el atributo placeholder, por lo que dentro de la función principal this hará referencia a estos inputs.

$(this).parent('form').submit(function(e){
  $('input[placeholder].placeholder', this).val('');
});

Ahora vamos a ejecutar la función creada en el paso anterior para activar el placeholder sobre los campos de texto:

$(this).each(function(){
  $.fn.placeholder.on(this);
});

Por último utilizaremos los eventos focus y blur de los campos de texto para activar y desactivar el placeholder:

return $(this)
  // Evento on focus
  .focus(function(){
    // Desactivamos el placeholder si vamos a introducir nuevo texto
    if ($(this).hasClass('placeholder')){
      $.fn.placeholder.off(this);
    }
  })
  // Evento on blur
  .blur(function(){
    // Activamos el placeholder si no tiene contenido
    if ($(this).val() == ''){
      $.fn.placeholder.on(this);
    }
  });

Todo junto

El aspecto final del plugin es el siguiente:

(function($){
  $.fn.placeholder = function(){
    // Ingnoramos si el navegador soporta nativamente esta funcionalidad
    if ($.fn.placeholder.supported()){
      return $(this);
    }else{

      // En el evento submit del formulario reseteamos los values de los inputs
      // cuyo value es igual al placeholder
      $(this).parent('form').submit(function(e){
        $('input[placeholder].placeholder', this).val('');
      });

      // activamos el placeholder
      $(this).each(function(){
        $.fn.placeholder.on(this);
      });

      return $(this)
        // Evento on focus
        .focus(function(){
          // Desactivamos el placeholder si vamos a introducir nuevo texto
          if ($(this).hasClass('placeholder')){
            $.fn.placeholder.off(this);
          }
        })
        // Evento on blur
        .blur(function(){
          // Activamos el placeholder si no tiene contenido
          if ($(this).val() == ''){
            $.fn.placeholder.on(this);
          }
        });
    }
  };

  // Función que detecta si el navegdor soporta el placeholder nativamente
  // Extraida de: http://diveintohtml5.org/detect.html#input-placeholder
  $.fn.placeholder.supported = function(){
    var input = document.createElement('input');
    return !!('placeholder' in input);
  };

  // Añade el contenido del placeholder en el value del input
  $.fn.placeholder.on = function(el){
    var $el = $(el);
    $el.val($el.attr('placeholder')).addClass('placeholder');
  };
  // Borra el contenido del value
  $.fn.placeholder.off = function(el){
    $(el).val('').removeClass('placeholder');
  };
})(jQuery);

Sólo falta usar este plugin en el evento $(document).ready():

$(document).ready(function(){
  $('input[placeholder]').placeholder();
});

Con la clase CSS placeholder podemos cambiar el color al texto del input (como hacen los navegadores que sí soportan nativamente los placeholder), por ejemplo:

input.placeholder{
  color: #cccccc;
}

A continuación una demostración del funcionamiento. Prueba a acceder a esta página con distintos navegadores. El texto de abajo te indicará si tu navegador soporta el atributo placeholder y podrás comprobar que el funcionamiento del formulario es el mismo.

Demostración