jQuery 之 Keypress和Keydown事件之间的区别

jQuery支持3种类型的键盘事件,而我们是:

  1. keyup():在键盘上释放键时触发的事件。
  2. keydown():按下键盘上的某个键时触发事件。
  3. keypress :()按下键盘上的某个键时触发事件。

从上面的定义看来,keydown()keypress()是同一件事。但是,实际上它们并不完全相同。

让我们看看它们有何不同。

1)特殊键(例如CTRL或ALT或SHIFT)

如果您按下任何特殊键,浏览器将仅触发keydown()事件,而不触发keypress()事件。

尝试一下

尝试按一些常规键,然后按一些特殊键。

<html>
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script type="text/javascript">
var keydownCounter = 0;
var keypressCounter = 0;
$( document ).ready(function(){

	$('#textbox').keydown(function(event){
		$('#keydownCounter').html(++keydownCounter);
	});
	 
	$('#textbox').keypress(function(event){
		$('#keypressCounter').html(++keypressCounter);
	});

});
</script>
</head>
<body>
	<h4>jQuery keydown() and keypress() difference</h4>
	
	<label>TextBox : </label><input id="textbox" type="text" size="50" />
	
	<div>
		<label>keydown() event fired : </label><span id="keydownCounter">0</span> times.
	</div>
	
	<div>
		<label>keypress() event fired : </label><span id="keypressCounter">0</span> times.
	</div>
</body>
</html>

2)捕获键码或键ascii

如果您打字母a和A(大写字母),则会发现以下事件行为。

  1. keydown()将显示a = 65,A = 65(不区分大小写)。
  2. keypresss()将显示a = 97,A = 65(区分大小写)。

如果要捕获实际字符键入,请始终使用keypress()事件。

尝试一下

尝试在[Caps Lock]打开的情况下按一些键,然后再将其关闭。

<html>
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script type="text/javascript">
$( document ).ready(function(){

	$('#textbox').keydown(function(event){
		var keycode = (event.keyCode ? event.keyCode : event.which);
		$('#keydownCode').html(keycode);
	});
	 
	$('#textbox').keypress(function(event){
		var keycode = (event.keyCode ? event.keyCode : event.which);
		$('#keypressCode').html(keycode);
	});

});
</script>
</head>
<body>
	<h4>jQuery keydown() and keypress() difference</h4>
	
	<label>TextBox : </label><input id="textbox" type="text" size="50" />
	
	<div>
		<label>keydown() detected keycode : </label><span id="keydownCode">0</span>.
	</div>
	
	<div>
		<label>keypress() detected keycode : </label><span id="keypressCode">0</span>.
	</div>
</body>
</html>
event.keyCode在FireFox中无法运行,但在IE中可以完美运行。要在Firefox中获取event.keyCode,您应该改用event。哪一个,jQuery也会推荐它。所以更好的方法应该是var keycode =(event.keyCode?event.keyCode:event.which);

3)长按任意键

在这种情况下,根据docs,keydown()事件被触发一次,但是keypress()事件将一直触发直到释放键为止。无论如何,这是浏览器特定的行为,我不会建议您使用此功能。这应该仅限于您的知识。

尝试一下

按任意键并保持按下状态。

<html>
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script type="text/javascript">
var keydownCounter = 0;
var keypressCounter = 0;
$( document ).ready(function(){

	$('#textbox').keydown(function(event){
		$('#keydownCounter').html(++keydownCounter);
	});
	 
	$('#textbox').keypress(function(event){
		$('#keypressCounter').html(++keypressCounter);
	});

});
</script>
</head>
<body>
	<h4>jQuery keydown() and keypress() difference</h4>
	
	<label>TextBox : </label><input id="textbox" type="text" size="50" />
	
	<div>
		<label>keydown() event fired : </label><span id="keydownCounter">0</span> times.
	</div>
	
	<div>
		<label>keypress() event fired : </label><span id="keypressCounter">0</span> times.
	</div>
</body>
</html>
如果以上演示在您的浏览器中不起作用,请不要担心。你不是一个人。请从http://unixpapa.com/js/key.html参考2.2节(自动重复触发的事件)。

如果您有任何疑问或建议,请告诉我。

学习愉快!

saigon has written 1440 articles

Leave a Reply