Home > Developer > JavaScript
Version 1
Css code:
Copy codeThe Code is as follows:
. Focus {
Border: 1px solid # f00;
Background: # fcc;
}
When the focus is obtained, add the focus style, add the border, and change the background color to # fcc
Html code:
Copy codeThe Code is as follows:
<Body>
<Form action = "" method = "post" id = "regForm">
<Fieldset>
<Legend> basic personal information </legend>
<Div>
<Label for = "username"> name: </label>
<Input id = "username" type = "text"/>
</Div>
<Div>
<Label for = "pass"> password: </label>
<Input id = "pass" type = "password"/>
</Div>
<Div>
<Label for = "msg"> details: </label>
<Textarea id = "msg" rows = "2" cols = "20"> </textarea>
</Div>
</Fieldset>
</Form>
</Body>
There are two inputs, one textare box.
: Input matches all input, textarea, select, And button elements.
JQuery code:
Copy codeThe Code is as follows:
<Script type = "text/javascript">
$ (Function (){
$ (": Input"). focus (function (){
$ (This). addClass ("focus ");
}). Blur (function (){
$ (This). removeClass ("focus ");
});
})
</Script>
Use: input to match all input elements. when the focus is obtained, add the style focus to automatically identify the current element through $ (this. The focus () method is used to obtain the function executed when a focus event occurs. The blur () method is a function executed when a focus event is lost.
Version 2:
Sometimes there is a default content in the text box, as the prompt information, after getting the focus, you need to make it disappear. You can make the following changes:
Copy codeThe Code is as follows:
<Script type = "text/javascript">
$ (Function (){
$ (": Input"). focus (function (){
$ (This). addClass ("focus ");
If ($ (this). val () = this. defaultValue ){
$ (This). val ("");
}
}). Blur (function (){
$ (This). removeClass ("focus ");
If ($ (this). val () = ''){
$ (This). val (this. defaultValue );
}
});
})
</Script>
Make a logical judgment. If the value is the default value, clear the content in the text box.
If the text box is empty, that is, if no content is entered, the value is set to the default value.
This is a simple logic.
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
