Simular placeholder con jQuery

JavaScript   |   1 Comentarios

Simular placeholder con jQuery

Que HTML5 es una revolución en el panorama web no lo duda nadie. Pero es una revolución que no termina de llegar. Aun no está totalmente implantado, y muchas veces, sus funcionalidades se ven mermadas por algunos navegadores.

Es el caso del placeholder. El placeholder es un atributo de los input text, es decir, de los cuadros de texto simple, que hace que aparezca un texto en gris en el cuadro de texto, que desaparece cuando pulsamos en el cuadro para poder escribir. Es muy útil para no tener que estar definiendo etiquetas.

Pero claro, si nuestro navegador no admite HTML5, lo que obtenemos es un formulario totalmente en blanco, y el usuario que lo rellena no sabe dónde tiene que poner cada dato.

Por suerte, podemos simular un efecto parecido si usamos jQuery (aunque es más engorroso que escribir simplemente placeholder=»Nombre»). Voy a hacerlo para un par de campos, pero evidentemente, podemos repetir esto las veces que necesitemos.

Tenemos un formulario HTML sencillo:

<form id='formid' ...>
    ...
    <input type='text' name='nombre' id='nombre' value='Nombre'>
    ...
    <input type='text' name='telefono' id='telefono' value='Teléfono'>
    ...
    <input type='button' onclick='enviarFormulario()' value='Enviar'>
</form>

Por ejemplo, entiendanse los puntos suspensivos como el resto del posible código que tengramos en nuestro formulario, y que nos es totalmente irrelevante.

Solucionamos este problema con dos funciones de jQuery, repetidas para cada input: focus y focusout.

<script type='text/javascript'>
    $(document).ready(function(){
        $('#nombre').focus(function(){
            if($(this).val() == "Nombre"){
                $(this).val("");
            }
        });
        $('#nombre').focusout(function(){
            if($(this).val() == ""){
                $(this).val("Nombre");
            }
        });
        $('#telefono').focus(function(){
            if($(this).val() == "Teléfono"){
                $(this).val("");
            }
        });
        $('#telefono').focusout(function(){
            if($(this).val() == ""){
                $(this).val("Teléfono");
            }
        });
    });
</script>

Debeis tener cuidado con las validaciones, claro, ya que esto admite que los campos Nombre y Teléfono tienen datos, con lo cual, cumplen aunque sean «requeridos». Si estos campos son obligatorios, tenemos que controlar la validación a mano:

<script type='text/javascript'>
    function validar(){
        if($('#nombre').val() == "" || $('#nombre').val() == "Nombre"){
            alert("El campo Nombre no puede estar vacío");
            $('#nombre').focus();
            return false;
        }
        if($('#telefono').val() == "" || $('#telefono').val() == "Teléfono"){
            alert("El campo Teléfono no puede estar vacío");
            $('#telefono').focus();
            return false;
        }
        return true;
    }

    function enviarFormulario(){
        if(validar()){
            $('#formid').submit();
        }
    }
</script>

Si no son obligatorios, entonces basta con cambiar el input button del formulario por:

<input type='submit' value='Enviar'>

¡Y listo! Repetid el código para todos los campos de texto en los que lo necesitéis.

“El objetivo es entregar código limpio que funcione… ahora”
    – Kent Beck

¿Te ha gustado el artículo?

(1 votos, promedio: 5,00 sobre 5)

Loading...

Suscríbete. Déjanos tu email y recibe contenido genial cada mes