jqueryでキーボードイベントトリガーを実装する方法-フロントエンドQ&A-php.cn

jqueryでキーボードイベントトリガーを実装する方法

青灯夜游

リリース： 2022-05-23 15:06:10

オリジナル

3823 人が閲覧しました

トリガーメソッド: 1. keydown()、構文「$(selector).keydown()」を使用します。これは、キーボードのキーが押されたときにイベントをトリガーできます。2. keypress()、構文を使用します。 "element object.keypress" ()"; 3. keyup() を使用します。構文は「element object.keyup()」です。

jqueryでキーボードイベントトリガーを実装する方法

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

jquery でキーボードイベントをトリガーするには 3 つの方法があります:

keydown(): キーダウンイベントの追加/トリガー
keypress(): キープレスイベントを追加/トリガー
keyup(): キーアップイベントを追加/トリガー

# #1 、 keydown()

keydown イベントは、キーボードのキーが押されたときに発生します。

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

トリガー構文:

$(selector).keydown()

ログイン後にコピー

2. keypress()

keypress() メソッドは、keypress イベントをトリガーするか、keypress イベントが発生したときに実行するように指定します。機能が発生します。

keypress イベントは keydown イベントに似ています。このイベントはボタンが押されたときに発生します。

トリガー構文:

$(selector).keypress()

ログイン後にコピー

3. keyup()

keyup イベントは、キーボードのキーが放されたときに発生します。

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

トリガー構文:

$(selector).keyup()

ログイン後にコピー

例 1:

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<script src="js/jquery-1.10.2.min.js"></script>
		<script>
			$(document).ready(function(){
		  $("input").keydown(function(){
		    $("input").css("background-color","lightblue");
		  });
		  $("input").keyup(function(){
		    $("input").css("background-color","lavender");
		  });
		  $("#btn1").click(function(){
		    $("input").keydown();
		  });  
		  $("#btn2").click(function(){
		    $("input").keyup();
		  });  
		});
		</script>
	</head>
	<body>

		<input type="text">
		<p><button id="btn1">输入字段的触发keydown事件</button></p>
		<p><button id="btn2">输入字段的触发keyup事件</button></p>

	</body>
</html>

ログイン後にコピー

jqueryでキーボードイベントトリガーを実装する方法

例 2:

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<script src="js/jquery-1.10.2.min.js"></script>
		<script>
			i = 0;
			$(document).ready(function() {
				$("p").keypress(function() {
					$("span").text(i += 1);
				});
				$("button").click(function() {
					$("p").keypress();
				});
			});
		</script>
	</head>
	<body>

		<p>触发次数: <span>0</span></p>
		<button>触发按键事件keypress</button>

	</body>
</html>

ログイン後にコピー

jqueryでキーボードイベントトリガーを実装する方法