Bagaimana untuk melaksanakan pencetusan acara papan kekunci dalam jquery

青灯夜游
Lepaskan: 2022-05-23 15:06:10
asal
3802 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!

Label berkaitan:
sumber:php.cn
Kenyataan Laman Web ini
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
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan