js動態修改input輸入框的type屬性(實現方法解析)_javascript技巧

我們很直接會想到下面的js

$(“#showPwd”).focus(function(){
$(this).attr(‘type','password');
});

發現并沒有實現預期效果，出現 uncaught exception type property can't be changed 錯誤，查看jQuery 1.42源碼 1488 行

// We can't allow the type property to be changed (since it causes problems in IE)
if ( name === “type” && rtype.test( elem.nodeName ) && elem.parentNode ) {
jQuery.error( “type property can't be changed” );
}

jQuery 修改不了用源生的JS呢？

$(“#pwd”).focus(function(){
$(“#pwd”)[0].type = ‘password';
$(“#pwd”).val(“”);
});

發現在FF下可以修改并將密碼輸入框type 修改為 “password” 并將 value設置為空，而IE下卻提示無法得到type屬性，不支持該命令。 彈出 type 看看真的無法得到嗎？

$(“#showPwd”).focus(function(){
alert($(“#showPwd”)[0].type);
$(“#showPwd”)[0].type = ‘password';
$(“#showPwd”).val(“”);
});

發現彈出text ，原來不是無法得到，只是IE下不能修改。 因此，我們想到可以先remove然后再生成一個type是password的密碼輸入框。

下面type為password的輸入框

$(“#showPwd”).focus(function() {
var text_value = $(this).val();
if (text_value == this.defaultValue) {
$(“#showPwd”).hide();
$(“#password”).show().focus();
}
});
$(“#password”).blur(function() {
var text_value = $(this).val();
if (text_value == “”) {
$(“#showPwd”).show();
$(“#password”).hide();
}
});

最終效果： 當輸入框獲得焦點的時，輸入的內容顯示為“****”；當失去焦點的時，內容為空時顯示“密碼”。

聲明：本網頁內容旨在傳播知識，若有侵權等問題請及時與本網聯系，我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com