需要實現(xiàn)的效果：一個輸入框，當(dāng)輸入框未獲得焦點的時候，value 值為 “密碼”；當(dāng)輸入框失去焦點的時候，輸入內(nèi)容顯示為”*****”

<input name=”password” type=”text” id=”showPwd” tabindex=”2″ class=”input” value=”密碼” />

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

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

發(fā)現(xiàn)并沒有實現(xiàn)預(yù)期效果，出現(xiàn) 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(“”);
});

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

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

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

下面type為password的輸入框

<input name=”password” type=”password” id=”password” class=”input” style=”display: none;” />

$(“#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();
}
});

最終效果： 當(dāng)輸入框獲得焦點的時，輸入的內(nèi)容顯示為“****”；當(dāng)失去焦點的時，內(nèi)容為空時顯示“密碼”。

最新評論