Cambiar el tipo de un campo de entrada utilizando jQuery (texto -> contraseña)

Question

Estoy tratando de cambiar el tipo de entrada, específicamente después de hacer clic en la entrada cambiar type = "text" to change = "password".

No sé por qué, pero no puedo agregar la opción type = "password" como atributo a la entrada.

 $('input#id_reg_pass').removeAttr("type"); #this works, type="text" is removing 
     $('input#id_reg_pass').attr('type', 'password'); #problem, this not works 
     $(this).addClass('exampleText').val($(this).attr('title')); 

¿No tienes un problema similar? Voy contenta por cada pista ... Gracias

Answer 1

No se puede cambiar el atributo type después de añadir el elemento a la DOM, si quieres que funcione de la misma manera en todos los navegadores, ver this y this.

A partir de Microsoft Internet Explorer 5, la propiedad type es de lectura/escritura única, pero sólo cuando un elemento de entrada es creada con el método createElement y antes de que se añade al documento .

Answer 2

Si estás usando jQuery 1.6, utilice .prop lugar:

$('input#id_reg_pass').removeAttr("type"); 
$('input#id_reg_pass').prop('type', 'password'); 
$(this).addClass('exampleText').val($(this).attr('title')); 

Demostración: http://jsfiddle.net/z8Rj3/

Answer 3

código emita un error para mí, type property can't be changed. Curiosamente, sin embargo, el siguiente código funciona para mí en Chrome, al menos:

$('input#id_reg_pass')[0].type = 'password'; 

Podría ser que esto no funciona entre navegadores sin embargo, lo que explicaría por qué jQuery no lo permite (Como se ha señalado por Niklas, este es el caso). Alternativamente, podría construir un nuevo <input> con los mismos atributos y reemplazar el anterior con el mismo.

Answer 4

Tenía exactamente el mismo problema, quería mostrar un texto en un campo de contraseña hasta que el usuario hizo clic sobre él. Hice otro enfoque, en lugar de tratar de cambiar el tipo de campo, lo oculté y mostré un nuevo campo de texto, luego llamé al foco(). Funciona bien.

$("#password_fake").focus(){ 
    $(this).hide(); 
    $("#password").show().focus(); 
} 

donde #password_fake es un campo de texto y #Password un campo de contraseña con style = "display: none".

Answer 5

Prueba este demo is here

$(document).delegate('input[type="text"]','click', function() { 
    $(this).replaceWith('<input type="password" value="'+this.value+'" id="'+this.id+'">'); 
}); 
$(document).delegate('input[type="password"]','click', function() { 
    $(this).replaceWith('<input type="text" value="'+this.value+'" id="'+this.id+'">'); 
});