$(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>
我已经创建了一个jQuery扩展之间切换文本和密码。适用于IE8(可能也适用于ie6和ie7，但没有测试)，不会丢失你的值或属性:
$.fn.togglePassword = function (showPass) {
return this.each(function () {
var $this = $(this);
if ($this.attr('type') == 'text' || $this.attr('type') == 'password') {
var clone = null;
if((showPass == null && ($this.attr('type') == 'text')) || (showPass != null && !showPass)) {
clone = $('<input type="password" />');
}else if((showPass == null && ($this.attr('type') == 'password')) || (showPass != null && showPass)){
clone = $('<input type="text" />');
}
$.each($this.prop("attributes"), function() {
if(this.name != 'type') {
clone.attr(this.name, this.value);
}
});
clone.val($this.val());
$this.replaceWith(clone);
}
});
};
效果非常好。你可以简单地调用$('#element').togglePassword();在两者之间切换或给出一个选项来“强制”基于其他东西(如复选框)的动作:$('#element').togglePassword($checkbox.prop('checked'));
一个更跨浏览器的解决方案……我希望这篇文章的要点能帮助到一些人。
此解决方案尝试设置type属性，如果失败，则简单地创建一个新的<input>元素，保留元素属性和事件处理程序。
changetypeatr .js (GitHub Gist):
/* x is the <input/> element
type is the type you want to change it to.
jQuery is required and assumed to be the "$" variable */
function changeType(x, type) {
x = $(x);
if(x.prop('type') == type)
return x; //That was easy.
try {
return x.prop('type', type); //Stupid IE security will not allow this
} catch(e) {
//Try re-creating the element (yep... this sucks)
//jQuery has no html() method for the element, so we have to put into a div first
var html = $("<div>").append(x.clone()).html();
var regex = /type=(\")?([^\"\s]+)(\")?/; //matches type=text or type="text"
//If no match, we add the type attribute to the end; otherwise, we replace
var tmp = $(html.match(regex) == null ?
html.replace(">", ' type="' + type + '">') :
html.replace(regex, 'type="' + type + '"') );
//Copy data from old element
tmp.data('type', x.data('type') );
var events = x.data('events');
var cb = function(events) {
return function() {
//Bind all prior events
for(i in events)
{
var y = events[i];
for(j in y)
tmp.bind(i, y[j].handler);
}
}
}(events);
x.replaceWith(tmp);
setTimeout(cb, 10); //Wait a bit to call function
return tmp;
}
}
我已经创建了一个jQuery扩展之间切换文本和密码。适用于IE8(可能也适用于ie6和ie7，但没有测试)，不会丢失你的值或属性:
$.fn.togglePassword = function (showPass) {
return this.each(function () {
var $this = $(this);
if ($this.attr('type') == 'text' || $this.attr('type') == 'password') {
var clone = null;
if((showPass == null && ($this.attr('type') == 'text')) || (showPass != null && !showPass)) {
clone = $('<input type="password" />');
}else if((showPass == null && ($this.attr('type') == 'password')) || (showPass != null && showPass)){
clone = $('<input type="text" />');
}
$.each($this.prop("attributes"), function() {
if(this.name != 'type') {
clone.attr(this.name, this.value);
}
});
clone.val($this.val());
$this.replaceWith(clone);
}
});
};
效果非常好。你可以简单地调用$('#element').togglePassword();在两者之间切换或给出一个选项来“强制”基于其他东西(如复选框)的动作:$('#element').togglePassword($checkbox.prop('checked'));
更容易……不需要创建所有动态元素。只需创建两个单独的字段，其中一个为“真实”密码字段(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会将一个元素置于另一个元素之后(呈现空格)，并且当用户进入/退出字段时，字段会出现移动。
