Home > Developer > JavaScript
Function implementation:
When users enter text, if they can highlight the text box being entered, it will be more user-friendly. jQuery is used below.
Implementation principle:
After the document is loaded (ready), add the focus and blur events of the input, and add and delete styles.
Sample Code:
Copy codeThe Code is as follows:
<Html>
<Head> <title> </title>
<Style type = "text/css">
. RedBack {}{
Color: white;
Background: red;
Border: 2px solid black;
}
</Style>
<Script language = "javascript" src = "jquery-1.1.4.js" type = "text/javascript"> </script>
<Script language = "javascript">
$ (Document). ready (function (){
$ ('Input'). focus (function (){
$ (This). addClass ('redback ');
// Alert ("hello ");
});
$ ('Input'). blur (function (){
$ (This). removeClass ('redback ');
});
});
</Script>
</Head>
<Body>
<Input type = "text" value = "hello, shanzhu" id = "myText">
<Input type = "text" value = "hello, shanzhu" id = "myText2">
<Input type = "text" value = "hello, shanzhu" id = "myText3">
<Input type = "text" value = "hello, shanzhu" id = "myText4">
<Input type = "text" value = "hello, shanzhu" id = "myText5">
<Input type = "text" value = "hello, shanzhu" id = "myText6">
</Body>
</Html>
According to the test requirements, after alert, you need to position the cursor to the specified position. After checking, we found that the focus attribute can be easily implemented.
Alert ("name cannot be blank! ");
// Locate the desired focus from the id
$ ("# Name"). focus ();
That is, after the prompt is output, the focus is returned to the input item. Similarly, you can add the corresponding style. If you can highlight the text box that is being entered, it will be more user-friendly. jQuery is used below.
After the document is loaded (ready), add the focus and blur events of the input, and add and delete styles.
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
