首页 技术文章 jquery

jQuery的keydown和keypress事件

发布日期: 2024-02-26
FontSize: 【小 中 大】
jQuery的keydown和keypress事件

keydown和keypress都是 javascript中的事件，用于处理用户按键操作。它们之间的主要区别在于它们触发的时机和它们处理的键盘事件类型。

本文章使用js框架jQuery对比keydown和keypress事件。

keydown事件

jQuery的keydown事件是用于捕获用户按下键盘上的键时触发的事件。

测试示例：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script src="https://z.lichil.com/views/index/js/jquery-1.9.1.min.js"></script>
</head>
<body>
<input class="input" type="text" placeholder="把光标移到此处并敲击键盘">
<script>
$(document).ready(function(){
	$(".input").keydown(function(event){
		if(event.which == 13){// 回车键的键码是13
  			console.log("你按下了回车键");
		}
		console.log("键码：" + event.which);
		var charCode = event.which;
    	var char = String.fromCharCode(charCode);
		console.log("你按下了字符：" + char);
	});
});
</script>
</body>
</html>

keypress事件

jQuery的keypress事件是用于捕获用户按下键盘上的字符键时触发的事件。它只会在按下可以生成字符的键时触发，比如字母、数字、符号等。

测试示例：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script src="https://z.lichil.com/views/index/js/jquery-1.9.1.min.js"></script>
</head>
<body>
<input class="input" type="text" placeholder="把光标移到此处并敲击键盘">
<script>
$(document).ready(function(){
	$(".input").keypress(function(event){
		if(event.which == 13){// 回车键的键码是13
  			console.log("你按下了回车键");
		}
		console.log("键码：" + event.which);
		var charCode = event.which;
    	var char = String.fromCharCode(charCode);
		console.log("你按下了字符：" + char);
	});
});
</script>
</body>
</html>

keydown和keypress事件的区别

  • keydown可以检测到所有的键盘事件，包括非字符键，而keypress只能检测到字符键。
  • keydown可以检测到按键的状态（如 ctrl、shift、alt 等），而keypress不能。

可以说，keydown包含了keypress，您完全可以使用keydown，而忽略keypress，除非您非常的确不想检测keypress不能检测的那些按键，而又不想使用keydown再去添加判断。

jquery