What are the jquery focus events?-Front-end Q&A-php.cn

What are the jquery focus events?

青灯夜游

Release： 2023-03-15 13:45:16

Original

3497 people have browsed it

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)".

What are the jquery focus events?

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)

Copy after login

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>

Copy after login

What are the jquery focus events?

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

Copy after login

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>

Copy after login

What are the jquery focus events?

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>
    $(&#39;#mochu&#39;).blur(function(){
        if($(this).val().length < 5){
            alert(&#39;字数太少了，多输入几个吧&#39;);
        }
    });
</script>

Copy after login

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