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

 

Autor
Escrito por Jose Aguilar - Experto programador Prestashop y Wordpress.
Te ha servido? Valora esta entrada!
1 estrella2 estrellas3 estrellas4 estrellas5 estrellas (3 votos, promedio: 4,67 de 5)
Cargando…
Comparte en las redes sociales

5 respuestas a “Cambiar el tipo del input con jQuery”

  1. Daniel dice:

    Hola, tu script funciona de maravilla, aunque no en IE…pero bueno, me sirvió mucho!!!Era lo que necesitaba.
    Saludos, Daniel

  2. javier dice:

    Gracias por el codigo y la explicación me servio de mucho..
    gracias!!
    😀

  3. Salvador dice:

    Por alguna razón el ejemplo que tienes si sirve en IE, pero lo copio a mi sitio y ya no sirve en IE por que sera?

  4. Ruben Rojas dice:

    Hola, es una solucion genial que ando buscando, pero ni la que tenia ni esta me funcionan en safari ios o safari os x, es rudo requerir un placeholder de texto para cuando el campo debe ser un date

Deja un comentario

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

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.

Ver más sobre