cambiar el tipo de campo de entrada con jQuery

Resuelto Richard Knop asked hace 15 años • 30 respuestas
$(document).ready(function() {
    // #login-box password field
    $('#password').attr('type', 'text');
    $('#password').val('Password');
});

Se supone que esto cambia el #passwordcampo de entrada (con id="password") que es de type passworda un campo de texto normal y luego completa el texto "Contraseña".

Pero no funciona. ¿Por qué?

Aquí está el formulario:

<form enctype="application/x-www-form-urlencoded" method="post" action="/auth/sign-in">
  <ol>
    <li>
      <div class="element">
        <input type="text" name="username" id="username" value="Prihlasovacie meno" class="input-text" />
      </div>
    </li>
    <li>
      <div class="element">
        <input type="password" name="password" id="password" value="" class="input-text" />
      </div>
    </li>
    <li class="button">
      <div class="button">
        <input type="submit" name="sign_in" id="sign_in" value="Prihlásiť" class="input-submit" />
      </div>
    </li>
  </ol>
</form>
Richard Knop avatar Oct 09 '09 21:10 Richard Knop
Aceptado

Es muy probable que esta acción se impida como parte del modelo de seguridad del navegador.

Editar: de hecho, al probar ahora mismo en Safari, aparece el error type property cannot be changed.

Edición 2: parece ser un error sacado directamente de jQuery. Usar el siguiente código DOM directo funciona bien:

var pass = document.createElement('input');
pass.type = 'password';
document.body.appendChild(pass);
pass.type = 'text';
pass.value = 'Password';

Edición 3: Directamente de la fuente de jQuery, esto parece estar relacionado con IE (y podría ser un error o parte de su modelo de seguridad, pero jQuery no es específico):

// We can't allow the type property to be changed (since it causes problems in IE)
if ( name == "type" && jQuery.nodeName( elem, "input" ) && elem.parentNode )
    throw "type property can't be changed";
eyelidlessness avatar Oct 09 '2009 14:10 eyelidlessness

Solución de un paso

$('#password').get(0).type = 'text';
Sanket Sahu avatar Oct 03 '2011 12:10 Sanket Sahu