Is there focus event in jquery?-Front-end Q&A-php.cn

Is there focus event in jquery?

青灯夜游

Release： 2022-12-16 11:31:28

Original

2267 people have browsed it

jquery has focus events. When an element gains focus, a focus event occurs; in jquery, you can use the focus() method to trigger the focus event, or specify an event processing function to be run when a focus event occurs, using the syntax "$(selector).focus(function)". When an element loses focus, a blur event occurs; jquery can use the blur() method to trigger a blur event, or specify an event handler to run when a blur event occurs.

Is there focus event in jquery?

The operating environment of this tutorial: windows7 system, jquery3.6.1 version, Dell G3 computer.

The focus is the area of concern, that is, the position where the cursor is currently activated. The small vertical line flashing in the page screen indicates that a certain control on the web page is selected and can be operated. Click the mouse to get the cursor, and the Tab key can switch focus according to the set Tabindex.

For example, if a text box gets the focus, the characters you type on the keyboard will directly enter the text box; or if a drop-down list box gets the focus, if you press the down arrow on the keyboard, it will A list will be made. The program also has events that occur when focus is gained (gotfocus()), events that occur when focus is lost (lostfocus()), and a method to set focus for the control (setfocus()). Making good use of focus can make your program appear very user-friendly.

Is there focus event in jquery?

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

Is there focus event in jquery?

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

Grammar

//为被选元素触发 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

Is there focus event in jquery?

[Recommended learning:jQuery video tutorial、webfront-end video】

The above is the detailed content of Is there focus event in jquery?. For more information, please follow other related articles on the PHP Chinese website!