Js dynamically modifies the type attribute of the input box to implement method resolution

Effect to achieve: an input box, when the input box does not get focus, the value value is "password"; When the input box loses focus, the input appears as "*****"

< Input name= "password" type= "text" id= "showPwd" tabindex= "2" class= "input" value= "password" />

We're going to think directly about js down here

$(" # showPwd "). The focus (the function () {
$(this). Attr (' type 'and' password ');
});

Uncaught exception type property can't be changed. See jQuery 1.42 source code line 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 can't change the source of JS?

$(" # PWD "). The focus (the function () {
$(" # PWD ") [0]. Type = "password";
$(" # PWD "). Val (" ");
});

$(" # showPwd "). The focus (the function () {
Alert ($(" # showPwd ") [0]. Type);
$(" # showPwd ") [0]. Type = "password";
$(" # showPwd "). Val (" ");
});

Found pop-up text, the original is not unable to get, but IE can not be modified. So, we came up with the idea of removing and then regenerating a password field where the type is the password.

The input box below for type password

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

$(" # showPwd "). The focus (the function () {
Var text_value = $(this). Val ();
If (text_value == this.defaultvalue) {
$(" # showPwd "). Hide ();
$(" # "password," "). The show (). The focus ();
}
});
$(" # "password," "). The blur (function () {
Var text_value = $(this). Val ();
If (text_value == "") {
$(" # showPwd "). The show ();
$(" # "password," "). Hide ();
}
});

Final effect: when the input box gets focus, the input content is displayed as "****"; When out of focus, "password" is displayed when the content is empty.