Simulate placeholder jQuery

Simulate placeholder jQuery

Red-1

HTML5 is a revolution in the web scenario no one doubts. But it is a revolution that fails to arrive . Although not fully implemented, and often, their functionality is hampered by some browsers.

This is the case of the placeholder . The placeholder is an attribute of the input text, ie simple text boxes that displays a gray text in the text box that disappears when you click in the box in order to post. It is very helpful to not have to be defining labels.

Of course, if your browser does not support HTML5, what we get is a totally blank form , and the user who fills it does not know where to put each piece.

Luckily, we can simulate a similar effect if we use jQuery (although it is more cumbersome to write just placeholder = “Name”). I’ll do it for a couple of fields, but obviously, we can repeat this as many times as we need.

We have a simple HTML form:

<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>

For example, entiendanse the ellipsis as the rest of the possible tengramos code in our form, and that we are totally irrelevant.

We solve this problem with two jQuery functions, repeated for each input: focus and 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>

You ought to be careful validations, of course, as this admits the Name and Phone fields have data, which, although they meet “required”. If these fields are required, we have to control the validation at hand:

<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>

If they are not mandatory, then simply change the input button on the form by:

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

 

Repeat the code to all text fields where you need it.

“The goal is to deliver clean code that works … now” 
    – 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 *



Aún no hay comentarios en esta entrada. ¿Te animas?