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" />
Autor
¿Buscas trabajo de programador?
5 respuestas a “Cambiar el tipo del input con jQuery”
Deja una respuesta
52 artículos que te podrían interesar
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
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?
Podría ser por la versión de jquery, el DOCTYPE, o el charset. Fíjate a ver si lo tienes igual
Gracias por el codigo y la explicación me servio de mucho..
gracias!!
😀
Hola, tu script funciona de maravilla, aunque no en IE…pero bueno, me sirvió mucho!!!Era lo que necesitaba.
Saludos, Daniel