Cambiar el tipo del input con jQuery

En ocasiones especiales tenemos que realizar funcionalidades tan detalladas que jamás se te hubieran cruzado por la cabeza.

En este artículo vamos a explicar como cambiar el tipo de un campo de texto o type=”text” a campo de tipo contraseño o de type=”password” utilizando la tecnología jQuery.

En el ejemplo que vamos a ilustrar vamos a tener un campo para escribir nuestra contraseña. En principio, lo mostraremos como campo de tipo texto pero cuando hagan click o se situen con el cursor en dicho campo cambiaremos el tipo a password para evitar que terceros vean la contraseña que escribimos en el caso de que estuvieran presentes.

Para conseguir este efecto lo primero que haremos será incluir en nuestre <head> la librería jQuery y los scripts necesarios para realizar el efecto.

<script language="javascript">
$(document).ready(function(){
    $("input#contrasena").focus(function(){
        $(this).val('');
        $(this).get(0).type = 'password';
    });

    $("input#contrasena").click(function(){
        $(this).val('');
        $(this).get(0).type = 'password';
    });

    $("input#contrasena").focusout(function(){
        var value = $(this).val();

        if(value == '') {
            $(this).get(0).type = 'text';
            $(this).val($(this).attr('default'));
        }

    });
});
</script>

Como vemos, el documento está a la espera de que alguien se si situe o haga click en el campo con id=”contrasena” para cambiar el tipo de campo antes de que empiece a escribir.

Vayamos por partes:

$("input#contrasena").focus(function(){
    $(this).val('');
    $(this).get(0).type = 'password';
});

En el código anterior, tras situarse en el campo con id=”contrasena”, borramos su contenido por defecto y cambiamos el type del input a “password”.

$("input#contrasena").click(function(){
     $(this).val('');
     $(this).get(0).type = 'password';
});

En el código anterior, tras hacer click en el campo con id=”contrasena”, borramos su contenido por defecto y cambiamos el type del input a “password”.

$("input#contrasena").focusout(function(){
    var value = $(this).val();

    if(value == '') {
        $(this).get(0).type = 'text';
        $(this).val($(this).attr('default'));
    }
});

Y por último, en el código anterior, tras salirnos del campo con id=”contrasena”, obtenemos su valor o value y comprobamos si no hay nada para cambiar el type a “text” y añadirle su contenido por defecto.

En nuestro <body> tendremos el siguiente código HTML:

<input type="text" name="contrasena" id="contrasena" value="Escribe aqui tu contraseña" default="Escribe aqui tu contraseña" size="50" />

Ver ejemplo en funcionamiento

 

1 estrella2 estrellas3 estrellas4 estrellas5 estrellas (3 votos, promedio: 4,67 de 5)
Cargando…

Comparte en las redes sociales

Escrito por Jose Aguilar - Experto programador Prestashop y Wordpress.

4 comentarios para “Cambiar el tipo del input con jQuery

Deja un comentario

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

*