jquery about page Focus positioning (changing the style when the text box gets the focus) _jquery

Source: Internet
Author: User
Function implementation:
When users enter text, if they can highlight the text box that is being entered, it will be more humane, and then use jquery to implement it.

Implementation principle:
After the document is loaded (ready), add the focus and blur events for input, and make additions and deletions to the styles.
code example:
Copy Code code as follows:

<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>
<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>

Depending on the requirements of the test, after alert, position the cursor at the specified location. After the lookup found: Focus properties can be easily done.

Alert ("Name cannot be empty!") ");

Locate the desired focus by ID

$ ("#name"). focus ();

That is, when the output is prompted, the focus returns to the entry. Similar can also be added to the corresponding style. If you can highlight the text box you are typing, it will be more humane, and use jquery to do the following.

After the document is loaded (ready), add the focus and blur events for input, and make additions and deletions to the styles.

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.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.