jQueryにフォーカスイベントはありますか？-フロントエンドQ&A-php.cn

jQueryにフォーカスイベントはありますか？

青灯夜游

リリース： 2022-12-16 11:31:28

オリジナル

2213 人が閲覧しました

jquery にはフォーカスイベントがあります。要素がフォーカスを取得すると、フォーカスイベントが発生します。jquery では、focus() メソッドを使用してフォーカスイベントをトリガーしたり、構文 "$(selector) を使用して、フォーカスイベントの発生時に実行されるイベント処理関数を指定したりできます。 ).focus(関数)」。要素がフォーカスを失うと、ブラーイベントが発生します。jquery は、blur() メソッドを使用してブラーイベントをトリガーしたり、ブラーイベントの発生時に実行するイベントハンドラーを指定したりできます。

jQueryにフォーカスイベントはありますか？

このチュートリアルの動作環境: Windows7 システム、jquery3.6.1 バージョン、Dell G3 コンピューター。

フォーカスは関心のある領域、つまりカーソルが現在アクティブになっている位置です。ページ画面内で点滅する小さな垂直線は、Web ページ上の特定のコントロールが選択されていることを示します。操作される。マウスをクリックしてカーソルを取得し、Tab キーで設定された Tabindex に従ってフォーカスを切り替えることができます。

たとえば、テキストボックスがフォーカスを取得した場合、キーボードで入力した文字はテキストボックスに直接入力されます。または、ドロップダウンリストボックスがフォーカスを取得した場合は、下矢印を押します。キーボードを押すとリストが作成されます。このプログラムには、フォーカスを獲得したときに発生するイベント (gotfocus())、フォーカスが失われたときに発生するイベント (lostfocus())、およびコントロールのフォーカスを設定するメソッド (setfocus()) もあります。フォーカスをうまく活用すると、プログラムを非常に使いやすく見せることができます。

jQueryにフォーカスイベントはありますか？

#jquery は focus イベントを取得します

要素がフォーカスを取得すると、focus イベントが発生します。

要素がマウスクリックによって選択されるか、タブキーによって配置されると、その要素はフォーカスを取得します。

focus() メソッドは、フォーカスイベントをトリガーするか、フォーカスイベントの発生時に実行する関数を指定します。

構文

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

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

ログイン後にコピー

関数: オプション。フォーカスイベントが発生したときに実行される関数を指定します。

#例: 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にフォーカスイベントはありますか？

#jquery がフォーカスを失うイベント

blur イベントは、要素がフォーカスを失ったときに発生します。

blur() メソッドは、blur イベントをトリガーするか、blur イベントの発生時に実行する関数を指定します。

ヒント: このメソッドは、focus() メソッドと一緒によく使用されます。

文法

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

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

ログイン後にコピー

例:blur() メソッドがフォーカスを失う

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

ログイン後にコピー

[推奨学習: jQueryにフォーカスイベントはありますか？ jQuery ビデオチュートリアル