Bagaimana untuk melaksanakan pencetusan acara papan kekunci dalam jquery-Soal Jawab bahagian hadapan-php.cn

Bagaimana untuk melaksanakan pencetusan acara papan kekunci dalam jquery

青灯夜游

Lepaskan： 2022-05-23 15:06:10

asal

3823 orang telah melayarinya

Kaedah pencetus: 1. Gunakan keydown(), sintaks "$(selector).keydown()", yang boleh mencetuskan acara apabila kekunci papan kekunci ditekan 2. Gunakan kekunci(), sintaks "elemen object.keypress" ()"; 3. Gunakan keyup(), sintaksnya ialah "element object.keyup()".

Bagaimana untuk melaksanakan pencetusan acara papan kekunci dalam jquery

Persekitaran pengendalian tutorial ini: sistem Windows 7, versi jquery 1.10.2, komputer Dell G3.

Terdapat tiga cara untuk mencetuskan acara papan kekunci dalam jquery:

keydown(): Tambah/cetuskan acara keydown
tekan kekunci(): Tambah/cetuskan acara tekan kekunci
keyup(): Tambah/cetuskan acara keyup

1 , keydown()

Acara keydown berlaku apabila kekunci papan kekunci ditekan.

Kaedah keydown() mencetuskan acara keydown, atau menentukan fungsi untuk dijalankan apabila peristiwa keydown berlaku.

Sintaks pencetus:

$(selector).keydown()

Salin selepas log masuk

2. tekan kekunci()

kaedah tekan kekunci() mencetuskan peristiwa penekan kekunci, atau menetapkan bahawa apabila menekan kekunci kejadian berlaku fungsi untuk dijalankan.

Acara menekan kekunci adalah serupa dengan acara kekunci. Peristiwa ini berlaku apabila butang ditekan.

Sintaks pencetus:

$(selector).keypress()

Salin selepas log masuk

3 keyup()

Acara keyup berlaku apabila kekunci papan kekunci dilepaskan.

Kaedah keyup() mencetuskan acara keyup, atau menentukan fungsi untuk dijalankan apabila acara keyup berlaku.

Sintaks pencetus:

$(selector).keyup()

Salin selepas log masuk

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

Salin selepas log masuk

Bagaimana untuk melaksanakan pencetusan acara papan kekunci dalam jquery

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

Salin selepas log masuk

Bagaimana untuk melaksanakan pencetusan acara papan kekunci dalam jquery

[Pembelajaran yang disyorkan: tutorial video jQuery, video bahagian hadapan web]

Atas ialah kandungan terperinci Bagaimana untuk melaksanakan pencetusan acara papan kekunci dalam jquery. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!