Home >Web Front-end >Front-end Q&A >What are the jquery focus events?
There are two jquery focus events: 1. Focus gets the focus event. You can use the focus() method to trigger the focus event, or specify the event processing function to be run when the focus event occurs. The syntax "$( selector).focus(function)". 2. For the blur loss event, you can use the blur() method to trigger the blur event, or specify the event processing function to be run when the blur event occurs, with the syntax "$(selector).blur(function)".
The operating environment of this tutorial: windows7 system, jquery3.6 version, Dell G3 computer.
There are two jquery focus events: gaining focus focus() and losing focus blur().
jquery focus() gets the focus event
When an element gets focus, the focus event occurs.
When an element is selected by mouse click or positioned by tab key, the element will gain focus.
The focus() method triggers the focus event, or specifies a function to run when the focus event occurs.
Syntax
//触发 focus 事件 $(selector).focus() //将函数绑定到 focus 事件 $(selector).focus(function)
function: Optional. Specifies the function to be run when the focus event occurs.
Example: focus() method gets focus
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script src="js/jquery-3.6.1.min.js"></script>
<script>
$(document).ready(function(){
$("input").focus(function(){
$("input").css("background-color","#FFFFCC");
});
});
</script>
</head>
<body>
输入你的名字: <input type="text">
</body>
</html>
##jquery blur() loses focus event
The blur event occurs when an element loses focus. blur() method triggers the blur event, or specifies a function to run when the blur event occurs. Tips: This method is often used together with the focus() method. Syntax//为被选元素触发 blur 事件： $(selector).blur() //添加函数到 blur 事件： $(selector).blur(function)
Example: blur() method loses focus
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<script src="js/jquery-3.6.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("input").focus(function() {
$("input").css("background-color", "#FFFFCC");
});
$("input").blur(function() {
$("input").css("background-color", "#D6D6FF");
});
});
</script>
</head>
<body>
用户名: <input type="text" />
<p>请在上面的输入域中点击，使其获得焦点，然后在输入域外面点击，使其失去焦点。</p>
</body>
</html>
Use jq blur () loses focus event to verify the content entered by the user
The blur() loses focus event in JQuery, we can use it to check whether the content entered by the user in the input input box is legal, such as the following code , if the user input is less than five characters, a prompt will be given Sample code:<input type="text" name="" id="mochu">
<script>
$('#mochu').blur(function(){
if($(this).val().length < 5){
alert('字数太少了，多输入几个吧');
}
});
</script>[Recommended learning: jQuery video tutorial, web front-end video】
The above is the detailed content of What are the jquery focus events?. For more information, please follow other related articles on the PHP Chinese website!