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

Source: Internet
Author: User
Tags implement

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.



Related Article

Alibaba Cloud 10 Year Anniversary

With You, We are Shaping a Digital World, 2009-2019

Learn more >

Apsara Conference 2019

The Rise of Data Intelligence, September 25th - 27th, Hangzhou, China

Learn more >

Alibaba Cloud Free Trial

Learn and experience the power of Alibaba Cloud with a free trial worth $300-1200 USD

Learn more >

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.