HTML5 ofrece muchas características nuevas y emocionantes en el ámbito de las formas. Una de mis nuevas adiciones favoritas a los formularios en HTML5 es el atributo de marcador de posición. El texto de marcador de posición es el texto de "sugerencia" o "ejemplo" que reside en un campo de entrada de texto antes de que el usuario haga clic en (o haga clic en) en ese campo, y desaparezca en el momento en que el campo esté en uso. Y el código es increíblemente simple, también. Tomemos este ejemplo:
<input type = "text" placeholder = "Comience a escribir para comenzar la búsqueda." />
El único bit nuevo es el atributo de marcador de posición, pero resulta en esto:
Me encanta el texto de marcador de posición porque puede ayudar a que las formas grandes y complejas sean más fáciles de navegar. ¿Qué mejor lugar para explicar los requisitos de un campo de entrada que dentro del mismo campo? Y en los formularios cortos (como una barra de búsqueda), el texto del marcador de posición se podría usar en lugar de una etiqueta de campo, haciendo que su formulario sea mucho más compacto (aunque el W3C todavía sugiere que use un campo de etiqueta).
La única desventaja real del texto del marcador de posición, tal como lo veo, es que no puedo usarlo ahora ... o al menos, no aparecerá en todas partes.Firefox 3.7+ y Chrome / Safari 4.0+ admiten el texto de los marcadores de posición, pero Opera llega tarde y, como de costumbre, Internet Explorer está claramente ausente. La buena noticia es que esos navegadores no se romperán si se encuentran con un atributo de marcador de posición: simplemente lo ignorarán por completo. Pero si planeaba usar marcadores de posición para transmitir información importante a sus usuarios, esa omisión podría ser suficiente para hacer que desestime todo.
Soy una persona notoriamente impaciente, y no me gusta perder la funcionalidad nueva porque la tía Gertrude no puede ser convencida de que se aleje de Internet Explorer. Por lo tanto, sugiero esto como una solución temporal por el momento: usemos el texto de marcador de posición AHORA, para todos los navegadores que lo admiten, y simulemos la misma funcionalidad para los navegadores heredados.

Utilice el texto de marcador de posición ahora

Esta es la parte facil. Para los navegadores modernos, todo lo que tenemos que hacer es comenzar a usar el atributo de marcador de posición, y todo funcionará automáticamente. Así que esto:
<input type = "text" placeholder = "Comience a escribir para comenzar la búsqueda." />
Se convierte en esto:
Muy fácil.

Todos los navegadores que lo soportan

Como dije anteriormente, en el momento de escribir este artículo, el texto de marcador de posición es compatible con Firefox 3.7+ y Chrome / Safari 4.0+. Sin embargo, esto inevitablemente cambiará con el tiempo, por lo que no debemos confiar en estos datos para tomar nuestras decisiones de implementación. Además, el rastreo del navegador es TAN siglo XX. En su lugar, escribiremos un poco de jQuery para averiguar si el navegador del usuario admite el atributo de marcador de posición. De esta manera, tan pronto como IE u Opera decidan unirse a la diversión, los marcadores de posición en su sitio simplemente funcionarán mágicamente sin nuestra ayuda adicional.
Este código hará el truco:
 jQuery (function () {
 jQuery.support.placeholder = false;
 test = document.createElement ('input');
 if ('placeholder' en prueba) jQuery.support.placeholder = true;
});
Lo que estoy haciendo aquí es extender el objeto jQuery.support, tal como lo hicimos cuando probamos el soporte de radio de borde. Estoy usando JavaScript para crear un nuevo objeto de entrada, y luego estoy probando para ver si el atributo "marcador de posición" es una opción dentro de ese objeto. Será una opción en los navegadores que admiten texto de marcador de posición, y ausente en los que no lo hacen.
Una vez que hayamos ejecutado ese código, podremos verificar contra el objeto jQuery.support, de esta manera:
 if (! $. support.placeholder) {
// El texto del marcador de posición no es compatible. 
}

Falsea la misma funcionalidad

Así que ahora solo necesitamos que los otros navegadores se comporten de la misma manera. Y descubrí algo que facilitará nuestro trabajo: incluso si el navegador del usuario no reconoce el atributo de marcador de posición, ¡ jQuery que se ejecuta dentro de ese navegador todavía lo encontrará muy bien! Entonces podemos usar el elemento de marcador de posición en nuestro jQuery. Esto significa que no tenemos que hacer nada sofisticado al elemento de entrada para que funcione.
El siguiente código parece un poco complicado (y lo es, lógicamente), pero cumple su cometido.
 $ (function () {
 if (! $. support.placeholder) { 
  var active = document.activeElement;
  $ (': texto'). focus (function () {
   if ($ (this) .attr ('placeholder')! = '' && $ (this) .val () == $ (this) .attr ('placeholder')) {
    $ (this) .val (''). removeClass ('hasPlaceholder');
   }
  }). blur (function () {
   if ($ (this) .attr ('placeholder')! = '' && ($ (this) .val () == '' || $ (this) .val () == $ (this) .attr ( 'marcador de posición'))) {
    $ (this) .val ($ (this) .attr ('placeholder')). addClass ('hasPlaceholder');
   }
  });
  $ (': texto'). desenfoque ();
  $ (activo) .focus ();
  $ ('formulario'). submit (function () {
   $ (this) .find ('. hasPlaceholder'). each (function () {$ (this) .val ('');});
  });
 }
});
Lo primero que estamos haciendo es averiguar si hay un elemento de formulario seleccionado actualmente (que se seleccionará automáticamente cuando se cargue la página). Si es así, lo almacenamos en la variable "activa", por lo que podemos configurarlo especial más adelante. A continuación, creamos dos funciones de eventos para nuestros elementos (me estoy enfocando en las entradas de "texto", pero podría expandir / contraer esto cuando lo necesite): una función de enfoque (para cuando el elemento se hace clic en / tabulado a) y un desenfoque Elemento (para cuando el usuario se va a otro lado).
La función de desenfoque primero verifica si el elemento de entrada tiene un marcador de posición establecido, y si lo tiene, si el valor del valor de entrada está en blanco (el usuario no ingresó nada antes de continuar) o si es el mismo que el texto del marcador. Si es así, sabemos que se supone que debemos aplicar un marcador de posición en el desenfoque. Así que configuramos el valor (contenido) de la entrada para que sea el mismo que el texto del marcador de posición, y agregamos una clase de "hasPlaceholder" a la entrada para que podamos aplicarle un estilo que se vea como el texto del marcador de posición.
La función de enfoque primero verifica si el elemento tiene un marcador de posición establecido, y si lo tiene, si el "valor" actual del área de entrada es el mismo que el texto del marcador de posición. Si es así, eso significa que el usuario simplemente hizo clic en un campo de entrada al que se aplicó nuestro marcador de posición falso. Por lo tanto, borramos el campo de valor de la entrada y eliminamos la clase "hasPlaceholder".
Luego hacemos algunas cosas más de limpieza. Estamos ejecutando la función de "desenfoque" en todos nuestros campos cuando se carga la página, lo que agrega marcadores de posición donde sea necesario. Luego volvemos a enfocar el campo originalmente activo, lo que eliminaría el marcador de posición de ese campo en particular y movería el cursor allí. Y tenemos una función final que se activa en el envío del formulario, que elimina los campos de valor de cualquier campo que tenga aplicada la clase "hasPlaceholder". Esto nos impide enviar accidentalmente a lo largo de nuestra copia de marcador de posición falsa como una entrada real del usuario.
¿Y cómo diseñamos nuestra nueva copia de marcador de posición falsa para que se vea como un marcador de posición real? Resulta que el estilo del marcador de posición no es tan complicado en promedio, por lo que no requiere mucho trabajo:
 .hasPlaceholder {
 color: # 777;
}
Y con eso, tienes marcadores de posición que funcionan en TODOS los navegadores modernos, ¡no solo los elegantes! Puedes ver una demo aquí. Pruébalo en varios navegadores.