Home >Web Front-end >JS Tutorial >Use jquery to implement the input box to obtain the focus disappearing text_jquery
Use jquery to implement the input box to obtain the focus disappearing text_jquery
- WBOYOriginal
- 2016-05-16 17:35:121231browse
When we log in to the website, there is often information in the text box that prompts you to enter. When you click on the text box, the prompt information disappears automatically. When the text box contains nothing and loses focus, there is prompt text again.
1. For prototype development, do a simple one first:
We first need an html file:
Copy code The code is as follows:
Add jquery code below:
I used click and blur built-in event type processing, and only for the username box Valid (because there are other factors to consider in the password box)
Copy code The code is as follows:
< ;div id="content">
2. Do it better
This basic prototype is written, but this prototype has many shortcomings:
1. Maybe the password box can also be added Using this method, but the type of the password box is password, it cannot be displayed, so where is the prompt text?
2. I can accept the writing method if($(this).val()==""), but if($(this).val()=="Enter your name"), don’t you think This is very... what if I just want to lose this...
3. The prompt text is expressed in other gray bold fonts. Is this more interactive?
4. Since I want to use two fonts, can I extract them? Written in .css? This can be reused!
Solution:
1. Let the password box type be text first, and when it is clicked, we will set it to password
2. Use a variable to indicate whether you want to switch.
3. Set different css.
4. Use attr("class", "class1"), attr("class", "class2") to switch classes instead of referencing id. (That is to say Use. No #)
The following is the implementation:
Copy the code The code is as follows:
3.更多:
把css写到外部文件.
DRY原则!用插件来实现.
我在下一篇博客去实现.
author: aiqier
Statement：
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn