jquery implements a password with a short display process and implements the input hint effect

jquery implements a password with a short display process and implements the input hint effect

Purpose of implementation

These days when the project, the customer asked to enter a password in the text box, the password requires a short display process, such as:

Problem thinking

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

Solutions

To enter a user name, for example:

< Li > <  name= "TextField"  type= "text"  ID= "Usern"   value = "Please enter your user name"   class= "Input userName inputholder"/></li  >

Write a JS

$.fn.inputholder=function(){    vardval=$ ( This). Val (); $( This). Focus (function(){        $( This). Val ('). addclass (' focous ')); }). blur (function(){        if($( This). val () = = "){            $( This). Val (dval). Removeclass (' focous ');    }        }); };varinputholder=$ ('. Inputholder '));if(inputholder.length) {Inputholder.each (function() {      $( This). Inputholder ()});

When the input box gets 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 entry with a short display effect:

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

The password input is as follows:

<Li>     <inputname= "Pwdprompt"type= "text"ID= "Textfield2"value= "Please enter your password"class= "Input PassWord inputholder"/>     <inputname= "pwd"type= "Password"ID= "Password"class= "Input PassWord hide"  /></Li>

Since we had previously shown: "Please enter your password" to set the type of input to text so we wrote another input, set its type to password and hide this input.

In the developer tool of the browser we can see:

There will be an input with ID password-0, and this is the IPass.packed.js that we introduced automatically generated.

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

With the type of password we wrote before, input will be combined to implement the short-term password display process.

Then we add 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 has to be written in Document.ready, not in JS.

Mainly through the hiding and display to control the display, so that the password short-term display and prompt font hiding function.

jquery implements a password with a short display process and implements the input hint effect