Home > Developer > JavaScript
When we log on to the website, the text box will often prompt you to enter the information. When you click the text box, the prompt will automatically disappear. When there is nothing in the text box and there is no focus, with prompt text.
1. Prototype Development:
First, we need an html file:
Copy codeThe Code is as follows:
<Html>
<Head>
<Title> input test </title>
<Meta name = "Content-Type" content = "text/html; charset = UTF-8"/>
<Style type = "text/css">
// Place css here
</Style>
<Script type = "text/javascript" src = "js/jquery. js"> </script>
<Script type = "text/javascript">
// Put the jquery code here
</Script>
</Head>
<Body>
<Form method = "POST" id = "user" action = "">
User Name: <input type = "text" name = "username" value = "Enter your name"/> <br/>
PassWord: <input type = "password" name = "password" value = "Enter your password"/>
<Input type = "submit" name = "sub" value = "login"/>
</Form>
</Div>
</Body>
</Html>
Add the jquery code below:
I used click and blur built-in event type processing, and it is only valid for the username box (because there are other factors to consider in the password box)
Copy codeThe Code is as follows:
<Html>
<Head>
<Title> input test </title>
<Meta name = "Content-Type" content = "text/html; charset = UTF-8"/>
<Style type = "text/css">
</Style>
<Script type = "text/javascript" src = "js/jquery. js"> </script>
<Script type = "text/javascript">
$ (Document). ready (function (){
$ ("# Username"). click (
Function (){
If ($ (this). val () = "Enter your name "){
$ (This). val ("");
}
})
$ ("# Username"). blur (
Function (){
If ($ (this). val () = "")
{
$ (This). val ("Enter your name ");
}
})
});
</Script>
</Head>
<Body>
<Div id = "content">
<Form method = "POST" id = "user" action = "">
User Name: <input type = "text" id = "username" name = "username" value = "Enter your name"/> <br/>
PassWord: <input type = "password" name = "password" value = "Enter your password"/>
<Input type = "submit" name = "sub" value = "login"/>
</Form>
</Div>
</Body>
</Html>
2. Better performance
The basic prototype is written in this way, but this prototype has many shortcomings:
1. This method may be used for the password box, but the type of the password box is password and cannot be displayed. Why prompt text?
2. if ($ (this ). val () = "") is acceptable, but if ($ (this ). val () = "Enter your name"), you don't think this is... what if I want to lose this...
3. the prompt text is highlighted in other gray bold words. Is this more interactive?
4. Can I extract them in two fonts? Written in .css? This can be reused!
Solution:
1. In the password box, set the type to text. When you click it, set it to password.
2. Use a variable to indicate whether to switch.
3. Set different css.
4. Use attr ("class", "class1"), attr ("class", "class2") to switch the class, instead of referencing the id. (that is, use. No #)
The following is an implementation:
Copy codeThe Code is as follows:
<Html>
<Head>
<Title> input test </title>
<Style type = "text/css">
. Default {
Font-weight: bold;
Color: #787878;
}
. Puton {
Font-weight: normal;
Color: black;
}
</Style>
<Script type = "text/javascript" src = "jquery. js"> </script>
<Script type = "text/javascript">
$ (Document). ready (function (){
Var B = true;
$ ("# Username"). click (
Function (){
If (B = true ){
$ (This). val ("");
$ (This). attr ("class", "puton ");
B = false;
}
}
)
$ ("# Username"). blur (
Function (){
If ($ (this). val () = ""){
$ (This). val ("Enter your name ");
$ (This). attr ("class", "default ");
B = true;
}
}
)
});
$ (Document). ready (function (){
Var B = true;
$ ("# Password"). click (
Function (){
If (B = true ){
$ (This). val ("");
$ (This). attr ("type", "password ");
$ (This). attr ("class", "puton ");
B = false;
}
})
$ ("# Password"). blur (
Function (){
If ($ (this). val () = ""){
$ (This). val ("Enter your password ");
$ (This). attr ("type", "text ");
$ (This). attr ("class", "default ");
B = true;
}
}
)
});
</Script>
</Head>
<Body>
<Div id = "content">
<Form method = "POST" id = "user" action = "">
User Name: <input type = "text" id = "username" class = "default" name = "username" value = "Enter your name"/> <br/>
PassWord: <input type = "text" id = "password" class = "default" name = "password" value = "Enter your password"/>
<Input type = "submit" name = "sub" value = "login"/>
</Form>
</Div>
</Body>
</Html>
3. More:
Write css to an external file.
DRY principle! Use plug-ins.
I will implement it in the next blog.
Author: aiqier
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
