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.