$(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>
Here is a method which uses an image next to the password field to toggle between seeing the password (text input) and not seeing it (password input). I use an "open eye" and "closed eye" image, but you can use whatever suits you. The way it works is having two inputs/images and upon clicking the image, the value is copied from the visible input to the hidden one, and then their visibility is swapped. Unlike many of the other answers which use hardcoded names, this one is general enough to use it multiple times on a page. It also degrades gracefully if JavaScript is unavailable.
这是其中两个在一页上的样子。在这个例子中，密码a是通过点击它的眼睛来显示的。
$(document).ready(function() {
$('img.eye').show();
$('span.pnt').on('click', 'img', function() {
var self = $(this);
var myinp = self.prev();
var myspan = self.parent();
var mypnt = myspan.parent();
var otspan = mypnt.children().not(myspan);
var otinp = otspan.children().first();
otinp.val(myinp.val());
myspan.hide();
otspan.show();
});
});
img.eye {
vertical-align: middle;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<form>
<b>Password-A:</b>
<span class="pnt">
<span>
<input type="password" name="passa">
<img src="eye-open.png" class="eye" alt="O" style="display:none">
</span>
<span style="display:none">
<input type="text">
<img src="eye-closed.png" class="eye" alt="*">
</span>
</span>
</form>
<form>
<b>Password-B:</b>
<span class="pnt">
<span>
<input type="password" name="passb">
<img src="eye-open.png" class="eye" alt="O" style="display:none">
</span>
<span style="display:none">
<input type="text">
<img src="eye-closed.png" class="eye" alt="*">
</span>
</span>
</form>
更容易……不需要创建所有动态元素。只需创建两个单独的字段，其中一个为“真实”密码字段(type="password")，另一个为“假”密码字段(type="text")，将假字段中的文本设置为浅灰色，并将初始值设置为“password”。然后用jQuery添加几行Javascript代码，如下所示:
<script type="text/javascript">
function pwdFocus() {
$('#fakepassword').hide();
$('#password').show();
$('#password').focus();
}
function pwdBlur() {
if ($('#password').attr('value') == '') {
$('#password').hide();
$('#fakepassword').show();
}
}
</script>
<input style="color: #ccc" type="text" name="fakepassword" id="fakepassword" value="Password" onfocus="pwdFocus()" />
<input style="display: none" type="password" name="password" id="password" value="" onblur="pwdBlur()" />
因此，当用户输入“假”密码字段时，它将被隐藏，真实字段将被显示，焦点将移动到真实字段。他们将永远无法在假字段中输入文本。
当用户离开真实的密码字段时，脚本将查看它是否为空，如果为空，将隐藏真实的字段并显示假的字段。
注意不要在两个输入元素之间留下空格，因为IE会将一个元素置于另一个元素之后(呈现空格)，并且当用户进入/退出字段时，字段会出现移动。
使用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的任何函数调用，但看起来不同。
有点棘手，但有效!!: -)
