Rumah > Artikel > hujung hadapan web > Bagaimana untuk melaksanakan pencetusan acara papan kekunci dalam jquery

Bagaimana untuk melaksanakan pencetusan acara papan kekunci dalam jquery

青灯夜游asal: 2022-05-23 15:06:103785semak imbas

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()".

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()

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()

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()

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>

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>

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!

Kenyataan：

Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Artikel sebelumnya：Bagaimana untuk membuat elemen boleh diedit dalam jqueryArtikel seterusnya：Bagaimana untuk membuat elemen boleh diedit dalam jquery

Artikel berkaitan

Lihat lagi