Simular placeholder con jQuery

Simular placeholder con jQuery

rojo-1

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?
Sé el primero en calificar esta publicación.
1 Star2 Stars3 Stars4 Stars5 Stars
Loading...
Artículo escrito por

¡Exprésate! Dejanos tu comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

1 Comentarios

Romualdo José Villalobos Perez

Eh muy mala opción en los formularios de registro, supón que haces un formulario de registro y das clic en el botón registrar sin siquiera tocar un input, lo que pasaría es que enviaría los datos como si los campos no fuesen vacíos, pero sin embargo muy útil tu solución eheh xD, justo tuve ese problema y ahora estoy buscando alternativas a este sistema.