Home >Web Front-end >JS Tutorial >Dynamic use of jquery page focus

Dynamic use of jquery page focus

php中世界最好的语言Original: 2018-04-26 14:05:191658browse

This time I will bring you the dynamic use of jquery page focus. What are the precautions for the dynamic use of jquery page focus. The following is a practical case, let's take a look.

When the user is inputting text, it would be more user-friendly if the text box being entered could be highlighted. This is achieved using jQuery below.
Implementation principle:
After document is loaded (ready), add the focus and blur events of the input, and perform operations of adding and deleting styles.
Code example:

<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(){ 
$(&#39;input&#39;).focus(function(){ 
$(this).addClass(&#39;redBack&#39;); 
//alert("hello"); 
}); 
$(&#39;input&#39;).blur(function(){ 
$(this).removeClass(&#39;redBack&#39;); 
}); 
}); 
</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 requirements of the test, after the alert, the cursor should be positioned at the specified position. After checking it, I found that the focus attribute can be easily achieved.

alert("姓名不能为空！"); 
//由id定位到需要的焦点 
$("#name").focus();

That is, after the prompt is output, the focus returns to the input item. Similarly, corresponding styles can also be added. It would be more user-friendly if the text box being entered could be highlighted. We will use jQuery to achieve this.
After the document is loaded (ready), add the focus and blur events of the input, and add and delete styles.

I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the php Chinese website!

Dynamic use of jquery page focus

Related articles