$(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的终极方法:
将原始输入字段隐藏在屏幕中。
$("#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的终极方法:
将原始输入字段隐藏在屏幕中。
$("#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的任何函数调用，但看起来不同。
有点棘手，但有效!!: -)
这样就可以了。尽管可以改进为忽略现在不相关的属性。
插件:
(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/
一个更跨浏览器的解决方案……我希望这篇文章的要点能帮助到一些人。
此解决方案尝试设置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;
}
}
