Una de mis novedades favoritas en HTML5 es la posibilidad de añadir texto de marcador de posición (Placeholder) fácilmente. El texto de marcador de posición es el texto gris que se encuentra en un campo de entrada que se utiliza para dar una pista a los usuarios sobre lo que se espera de entrada en ese campo. Una vez que los usuarios comienzan a escribir en el campo de entrada, este texto desaparecerá.

Antiguamente, solíamos hacer esto con JavaScript, de la siguiente manera;

JavaScript
<input type="text" value="Placeholder text"
onfocus="if(this.value=='Placeholder text')this.value='';"
onblur="if(this.value=='')this.value='Placeholder text';">

No hay nada malo en esta práctica, pero es más fácil en HTML5.

HTML5 introdujo un nuevo atributo con un nombre lógico; placeholder. He aquí un ejemplo:

HTML
<input type="text" placeholder="Placeholder Text">

Si lo vemos en los navegadores, la entrada debería tener ahora el texto en gris, como se ve a continuación;

Ejemplo de placeholder
Ejemplo de placeholder

Algunas cosas que deben tenerse en cuenta: de acuerdo con la especificación, el atributo placeholder no debe ser utilizado como una alternativa a una etiqueta y también se sugiere que este atributo sólo debe aplicarse a los tipos de entrada que requieren texto, por ejemplo, text, password, search, email, textarea y tel.

Nota

Añadir el marcador de posición a los tipos de entrada: radio y checkbox no supondrá ninguna diferencia.

Placeholder y CSS

Además, también es posible estilizar el texto del marcador de posición mediante CSS.

El siguiente ejemplo muestra cómo cambiamos el texto del marcador de posición a verde tanto en Chrome como en Firefox;

CSS
/* Para todos los navegadores modernos, incluyendo Firefox, Chrome */
input::placeholder {
  color: green;
}
Ejemplo de placeholder con CSS
Ejemplo de placeholder con CSS

Atributo Selector

CSS3 también dio soporte a este atributo introduciendo el selector de atributo [placeholder];

CSS
input[placeholder] {
  border: 1px solid orange;
}
Placeholder con Selector de Atributo
Placeholder con Selector de Atributo

En el ejemplo anterior, seleccionamos todas las entradas que tienen el atributo de marcador de posición y cambiamos el borde a naranja.

Marcadores de Posición Polyfills

No obstante, si necesitamos mostrar el marcador de posición en navegadores más antiguos pero poder seguir utilizando el atributo placeholder, podemos utilizar Polyfills. Hay un montón de Polyfills de Placeholder por ahí, pero en este ejemplo vamos a utilizar el PlaceMe.js;

JavaScript
<script src="jquery.js" type="text/javascript"></script>
<script src="placeme.js" type="text/javascript"></script>

El PlaceMe.js, como se puede ver en el fragmento de código anterior, depende de jQuery. Ahora, si lo vemos en, por ejemplo, Internet Explorer 9 todas las entradas deberían mostrar ahora el texto del marcador de posición.

Palabras Finales

Sin duda, el atributo Placeholder de HTML5 facilita la adición de texto de marcador de posición. Ahora nos toca a nosotros, desarrolladores y diseñadores web, elegir qué método utilizar: JavaScript o HTML5.

Si consideras que usar Polyfills y jQuery para soportar navegadores antiguos es redundante, entonces JavaScript es aparentemente más adecuado para el trabajo. Pero si puedes ignorar pacíficamente los navegadores antiguos, entonces usar HTML5 Placeholder es probablemente una mejor manera.

5/5 - (1 voto)