Heim > Artikel > Web-Frontend > Was sind die JQuery-Fokusereignisse?

Was sind die JQuery-Fokusereignisse?

青灯夜游Original: 2023-03-15 13:45:163443Durchsuche

Es gibt zwei JQuery-Fokusereignisse: 1. Focus ruft das Fokusereignis ab. Sie können die Methode focus() verwenden, um das Fokusereignis auszulösen, oder die Ereignisverarbeitungsfunktion angeben, die ausgeführt werden soll, wenn das Fokusereignis auftritt. $(Selektor). 2. Bei Unschärfeverlust-Fokus-Ereignissen können Sie die Methode „blur()“ verwenden, um das Unschärfeereignis auszulösen, oder die Ereignisverarbeitungsfunktion angeben, die ausgeführt werden soll, wenn das Unschärfeereignis auftritt, mit der Syntax „$(selector).blur(function )".

Die Betriebsumgebung dieses Tutorials: Windows7-System, JQuery3.6-Version, Dell G3-Computer.

Es gibt zwei Jquery-Fokus-Ereignisse: „Gaining Focus Focus()“ und „Losing Focus Blur()“.

jquery focus() ruft das Fokusereignis ab

Wenn ein Element den Fokus erhält, tritt das Fokusereignis auf.

Wenn ein Element per Mausklick ausgewählt oder mit der Tabulatortaste positioniert wird, erhält das Element den Fokus. Die Methode

focus() löst das Fokusereignis aus oder gibt eine Funktion an, die ausgeführt werden soll, wenn das Fokusereignis auftritt.

Syntax

//触发 focus 事件
$(selector).focus()

//将函数绑定到 focus 事件
$(selector).focus(function)

Funktion: Optional. Gibt die Funktion an, die ausgeführt werden soll, wenn das Fokusereignis auftritt.

Beispiel: Methode focus() Fokus abrufen

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

Was sind die JQuery-Fokusereignisse?

jquery blur() Ereignis „Fokus verlieren“

Das Unschärfeereignis tritt auf, wenn ein Element den Fokus verliert. Die Methode

blur() löst das Unschärfeereignis aus oder gibt eine Funktion an, die ausgeführt werden soll, wenn das Unschärfeereignis auftritt.

Tipps: Diese Methode wird oft zusammen mit der focus()-Methode verwendet.

Syntax

//为被选元素触发 blur 事件：
$(selector).blur()

//添加函数到 blur 事件：
$(selector).blur(function)

Beispiel: Methode „blur()“ verliert den Fokus

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

Was sind die JQuery-Fokusereignisse?

Verwenden Sie das JQ-Ereignis „Blur() hat den Fokus verloren“, um Benutzereingaben zu überprüfen.

Ereignis „Blur() hat den Fokus verloren“ in JQuery. Wir können es verwenden Damit wird überprüft, ob der vom Benutzer in das Eingabefeld eingegebene Inhalt zulässig ist. Der folgende Code gibt beispielsweise eine Eingabeaufforderung aus, wenn der vom Benutzer eingegebene Inhalt weniger als fünf Zeichen umfasst. Beispielcode:

<input type="text" name="" id="mochu">
<script>
    $(&#39;#mochu&#39;).blur(function(){
        if($(this).val().length < 5){
            alert(&#39;字数太少了，多输入几个吧&#39;);
        }
    });
</script>

[Empfohlen Lernen:

jQuery-Video-Tutorial

, Web-Frontend-Video】

Das obige ist der detaillierte Inhalt vonWas sind die JQuery-Fokusereignisse?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：Was ist ein Attributselektor in jquery?Nächster Artikel：Was ist ein Attributselektor in jquery?

In Verbindung stehende Artikel

Mehr sehen