jquery implementation password has a brief display process and realize the input hint effect

To achieve the purpose

These days when the project, the customer requirements in the text box to enter a password, the request password has a brief display process, the following figure:

Problem thinking



The first solution is how to implement the hint property similar to Android in the input box, HTML5 add placeholder, but now is not HTML5, how to do?


Solutions



For example, enter a user name:

<li>
<input name= "TextField" type= "text" id= "Usern" value= "Please enter your username" class= "input userName inputholder"/>
</li>


Write a JS




$.fn.inputholder=function () {
var dval=$ (this). Val ();
$ (this). focus (function () {
$ (this). Val (""). AddClass ("focous");
}). blur (function () {
if ($ (this). val () = "") {
$ (this). Val (dval). Removeclass ("focous");
}
});
};
var inputholder=$ (". Inputholder");
if (inputholder.length) {
Inputholder.each (function () {
$ (this). Inputholder ()
})
};



When the input box gets the focus, the value is emptied, and when the focus is lost, the previously saved value is paid to the input box.


The following resolves the password input with a brief display effect:



Found a JS library from the Internet: IPass.packed.js

The input of the password is as follows:

<li>
<input name= "Pwdprompt" type= "text" id= "textfield2" value= "Please enter your password" class= "input PassWord inputholder"/>
<input name= "pwd" type= "password" id= "password" class= "Input password Hide"/>
</li>



Because we previously in order to display: "Please enter your password" to set the type of input to text so we wrote an input, set its type to password and hide this input.



In the developer tools of the browser, we can see:

There will be an input with ID password-0, which is the IPass.packed.js generated by our introduction.

In my understanding, first write a type for password input, the import of JS will automatically generate a new input on this basis, this input is the type text, you can display the password.

With our previously written type for password input will be combined to implement a short password display process.

And then we joined in the Document.ready:


$ (document). Ready (function () {
To enable Ipass plugin
$ ("Input[type=password]"). Ipass ();
$ ("input[name=pwdprompt]"). focus (function () {
$ ("input[name=pwdprompt]"). Hide ();
$ ("input[name=password-0]"). Show (). focus ();
});
$ ("input[name=password-0]"). blur (function () {
if ($ (this). val () = "") {
$ ("input[name=pwdprompt]"). Show ();
$ ("input[name=password-0]"). Hide ();
}
});

});



Note: This must be written in Document.ready, not in JS.

Mainly by hiding and display to control the display, so as to achieve a short password display and prompt font hiding function.