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

这是为了将password类型的#password输入字段(id="password")更改为普通的文本字段,然后填充文本"password"。

但这并不奏效。为什么?

表格如下:

<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>

当前回答

这对我很有用。

$('#password').replaceWith($('#password').clone().attr('type', 'text'));

其他回答

作为浏览器安全模型的一部分,很可能会阻止该操作。

编辑:实际上,现在在Safari中测试,我得到的错误类型属性不能更改。

编辑2:这似乎是一个错误直接从jQuery。使用以下直接的DOM代码就可以了:

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

编辑3:直接从jQuery源代码来看,这似乎与IE有关(可能是一个bug或他们安全模型的一部分,但jQuery不是特定的):

// 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";

使用jQuery的终极方法:


将原始输入字段隐藏在屏幕中。

$("#Password").hide(); //Hide it first
var old_id = $("#Password").attr("id"); //Store ID of hidden input for later use
$("#Password").attr("id","Password_hidden"); //Change ID for hidden input

通过JavaScript创建新的输入字段。

var new_input = document.createElement("input");

将ID和值从隐藏的输入字段迁移到新的输入字段。

new_input.setAttribute("id", old_id); //Assign old hidden input ID to new input
new_input.setAttribute("type","text"); //Set proper type
new_input.value = $("#Password_hidden").val(); //Transfer the value to new input
$("#Password_hidden").after(new_input); //Add new input right behind the hidden input

为了解决IE上的错误,比如类型属性不能被改变,你可能会发现下面的方法很有用:

将click/focus/change事件附加到新的输入元素,以便在隐藏的输入上触发相同的事件。

$(new_input).click(function(){$("#Password_hidden").click();});
//Replicate above line for all other events like focus, change and so on...

旧的隐藏输入元素仍然在DOM中,因此将与新输入元素触发的事件进行反应。当ID交换时,新的输入元素将像旧的输入元素一样,并响应对旧的隐藏输入的ID的任何函数调用,但看起来不同。

有点棘手,但有效!!: -)

简单:

this.type = 'password';

$("#password").click(function(){
    this.type = 'password';
});

这是假设您的输入字段事先设置为“text”。

这里有一个DOM解决方案

myInput=document.getElementById("myinput");
oldHtml=myInput.outerHTML;
text=myInput.value;
newHtml=oldHtml.replace("password","text");
myInput.outerHTML=newHtml;
myInput=document.getElementById("myinput");
myInput.value=text;

我猜你可以使用一个包含单词“password”的background-image,并在.focus()上将其更改为空的background-image。

.blur() ----> image with "password"

.focus() ----->图像没有“密码”

你也可以用一些CSS和jQuery来实现。有一个文本字段显示在密码字段的顶部,hide()是在focus()和聚焦在密码字段…