$(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>
这样就可以了。尽管可以改进为忽略现在不相关的属性。
插件:
(function($){
$.fn.changeType = function(type) {
return this.each(function(i, elm) {
var newElm = $("<input type=\""+type+"\" />");
for(var iAttr = 0; iAttr < elm.attributes.length; iAttr++) {
var attribute = elm.attributes[iAttr].name;
if(attribute === "type") {
continue;
}
newElm.attr(attribute, elm.attributes[iAttr].value);
}
$(elm).replaceWith(newElm);
});
};
})(jQuery);
用法:
$(":submit").changeType("checkbox");
小提琴:
http://jsfiddle.net/joshcomley/yX23U/
下面是允许您更改文档中元素类型的一小段代码。
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浏览器进行了测试——对其他任何浏览器都不能保证!
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>
这样就可以了。尽管可以改进为忽略现在不相关的属性。
插件:
(function($){
$.fn.changeType = function(type) {
return this.each(function(i, elm) {
var newElm = $("<input type=\""+type+"\" />");
for(var iAttr = 0; iAttr < elm.attributes.length; iAttr++) {
var attribute = elm.attributes[iAttr].name;
if(attribute === "type") {
continue;
}
newElm.attr(attribute, elm.attributes[iAttr].value);
}
$(elm).replaceWith(newElm);
});
};
})(jQuery);
用法:
$(":submit").changeType("checkbox");
小提琴:
http://jsfiddle.net/joshcomley/yX23U/
