alterar o tipo de campo de entrada com jQuery

 
$(document).ready(function() {
    // #login-box password field
    $('#password').attr('type', 'text');
    $('#password').val('Password');
});

Isto é suposto alterar o campo de entrada #password (com id="password") que é de type password para um campo de texto normal, e depois preencher o texto "Password".

Não funciona, no entanto. Porquê?

Aqui está o formulário:

<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>
Rory O'Kane
Pergunta editada :em
Programação
javascript jquery html-input
9º outubro 2009 в 2:54
Ainda sem vistas
Solução

É muito provável que esta acção seja impedida como parte do modelo de segurança do navegador's.

Editar: de facto, testando agora mesmo no Safari, recebo o erro "propriedade do tipo não pode ser alterada".

Edição 2: isso parece ser um erro directamente da jQuery. A utilização do seguinte código DOM directo funciona muito bem:

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

Edição 3: Directamente da fonte jQuery, isto parece estar relacionado com o IE (e pode ser um bug ou parte do seu modelo de segurança, mas jQuery é't 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
Resposta editada :em
Comentários (7)

Basta criar um novo campo para contornar esta coisa da segurança:

var $oldPassword = $("#password");
var $newPassword = $("<input type='text' />")
                          .val($oldPassword.val())
                          .appendTo($oldPassword.parent());
$oldPassword.remove();
$newPassword.attr('id','password');
Comentários (0)

As propriedades do tipo podem't ser alteradas é necessário substituir ou sobrepor a entrada com uma entrada de texto e enviar o valor para a entrada da palavra-passe no momento do envio.

Comentários (0)