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

需要實現的效果：一個輸入框，當輸入框未獲得焦點的時候，value 值為 “密碼”；當輸入框失去焦點的時候，輸入內容顯示為”*****”

我們很直接會想到下面的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();
}
});

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