$(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.type.js (GitHub Gist)
var rtype = /^(?:button|input)$/i;
jQuery.attrHooks.type.set = function(elem, value) {
// We can't allow the type property to be changed (since it causes problems in IE)
if (rtype.test(elem.nodeName) && elem.parentNode) {
// jQuery.error( "type property can't be changed" );
// JB: Or ... can it!?
var $el = $(elem);
var insertionFn = 'after';
var $insertionPoint = $el.prev();
if (!$insertionPoint.length) {
insertionFn = 'prepend';
$insertionPoint = $el.parent();
}
$el.detach().attr('type', value);
$insertionPoint[insertionFn]($el);
return value;
} else if (!jQuery.support.radioValue && value === "radio" && jQuery.nodeName(elem, "input")) {
// Setting the type on a radio button after the value resets the value in IE6-9
// Reset value to it's default in case type is set after value
// This is for element creation
var val = elem.value;
elem.setAttribute("type", value);
if (val) {
elem.value = val;
}
return value;
}
}
它通过从文档中删除输入、更改类型然后将其放回原来的位置来解决这个问题。
请注意，这段代码只针对WebKit浏览器进行了测试——对其他任何浏览器都不能保证!
使用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的任何函数调用，但看起来不同。
有点棘手，但有效!!: -)
下面是允许您更改文档中元素类型的一小段代码。
jquery.type.js (GitHub Gist)
var rtype = /^(?:button|input)$/i;
jQuery.attrHooks.type.set = function(elem, value) {
// We can't allow the type property to be changed (since it causes problems in IE)
if (rtype.test(elem.nodeName) && elem.parentNode) {
// jQuery.error( "type property can't be changed" );
// JB: Or ... can it!?
var $el = $(elem);
var insertionFn = 'after';
var $insertionPoint = $el.prev();
if (!$insertionPoint.length) {
insertionFn = 'prepend';
$insertionPoint = $el.parent();
}
$el.detach().attr('type', value);
$insertionPoint[insertionFn]($el);
return value;
} else if (!jQuery.support.radioValue && value === "radio" && jQuery.nodeName(elem, "input")) {
// Setting the type on a radio button after the value resets the value in IE6-9
// Reset value to it's default in case type is set after value
// This is for element creation
var val = elem.value;
elem.setAttribute("type", value);
if (val) {
elem.value = val;
}
return value;
}
}
它通过从文档中删除输入、更改类型然后将其放回原来的位置来解决这个问题。
请注意，这段代码只针对WebKit浏览器进行了测试——对其他任何浏览器都不能保证!
我已经创建了一个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'));
这是所有IE8爱好者的又一个选择，在新浏览器上也能完美运行。您可以只给文本上色以匹配输入的背景。如果你有一个单一的字段，当你点击/聚焦在该字段上时，这将改变颜色为黑色。我不会在公共站点上使用这个，因为它会“迷惑”大多数人，但我在一个只有一个人可以访问用户密码的ADMIN部分中使用它。
$('#MyPass').click(function() {
$(this).css('color', '#000000');
});
-OR-
$('#MyPass').focus(function() {
$(this).css('color', '#000000');
});
这也是需要的，当您离开字段时，将文本更改为白色。简单，简单，简单。
$("#MyPass").blur(function() {
$(this).css('color', '#ffffff');
});
[另一选择]
现在，如果你有几个字段，你正在检查，都有相同的ID，因为我正在使用它，添加一个类的“pass”字段，你想隐藏的文本。设置密码字段类型为“text”。这样，只有类为“pass”的字段才会被更改。
<input type="text" class="pass" id="inp_2" value="snoogle"/>
$('[id^=inp_]').click(function() {
if ($(this).hasClass("pass")) {
$(this).css('color', '#000000');
}
// rest of code
});
这是第二部分。这将在您离开字段后将文本更改为白色。
$("[id^=inp_]").blur(function() {
if ($(this).hasClass("pass")) {
$(this).css('color', '#ffffff');
}
// rest of code
});
