Etiqueta: placeholder text

Placeholder es un atributo HTML5 utilizado como una pequeña pista o descripción corta del valor esperado en un campo de texto dentro de un formulario, como por ejemplo «Buscar», «Introduzca su e-mail», etc. Esta descripción se muestra dentro de la caja de texto cuando éste se encuentra vacío y desaparece cuando el elemento obtiene el foco.

Cómo hemos dicho se encuentra disponible desde la versión de HTML5 y su uso se encuentra bastante extendido en aplicaciones y páginas a lo largo y ancho de Internet. Funciona en los campos input de tipo: text, search, url, tel, email y password. Es soportado por todos los navegadores (Firefox, Opera, Chrome, Safari, etc.), pero existe un problema si quieres utilizarlo con Internet Explorer (de momento ninguna versión lo soporta).

Navegando por la web en busca de una solución para aplicar a uno de los proyectos en los que trabajo, cuya interfaz debe ser similar en todos los navegadores, encontré ésta que usa jQuery. jQuery es una librería javascript, que siempre es aplicable a multitud de problemas y usos, para alterar el comportamiento y visualización de los documentos web en navegadores, así como realizar peticiones asíncronas (ajax), y de la que ya os he hablado en otros artículos.

Podemos usar el siguiente código:

$(function() {
    if(!$.support.placeholder) {

            var active = document.activeElement;

            $(':text').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('placeholder'))) {
                            $(this).val($(this).attr('placeholder')).addClass('hasPlaceholder');
                    }
            });

            $(':text').blur();
            $(active).focus();

            $('form').submit(function () {
                    $(this).find('.hasPlaceholder').each(function() { $(this).val(''); });
            });

    }
});

Y este podría ser el css con el estilo, ya que el color de la letra del placeholder aparecería en un tono más grisáceo, como difuminado:

.hasPlaceholder { color: #777; } 

Lo que hace el código es sobreescribir el evento focus (posicionas el foco) y blur (el foco abandona el elemento) para elementos de tipo texto, en aquellos navegadores que no soportan el atributo placeholder, vamos en IE. Cuando se producen dichos eventos, leen el texto del atributo placeholder y lo muestran como valor del elemento (blur) aplicando la clase hasplaceholder, o bien borran el valor del campo (focus) y eliminan la clase hasplaceholder del campo de texto.

También se sobreescribe el evento submit, para borrar todos los valores de los campos de texto que muestran el texto placeholder, justo antes de enviar el formulario al servidor evitando que esos campos tengan valores incorrectos.

Se trata de una solución bastante elegante y nada intrusiva, porque sólo se aplica si el navegador no soporta el atributo. En caso de utilizar placeholder con Firefox, Safari, Chrome… el código jQuery no tiene efecto.