JavaScript 键盘事件详解：keydown、keypress 与 keyup 的区别及应用

键盘事件监听基础与示例

首先介绍如何监听全局的键盘按下事件，以监听全局的回车键为例。

$(document).keydown(function(event){
 if(event.keyCode == 13){
  alert('你按下了Enter'); 
 }
}); 

其次，演示如何针对特定组件监听键盘按下事件，例如监听ID为btn的按钮组件的回车按下事件。

$("#btn").keydown(function(event){
 if(event.keyCode==13){
  alert('你按下了Enter');      
 }
});

如果需要监听组合键，例如Ctrl+C的组合操作，可以通过特定方式实现。

$(document).keyup(function(event){
　　if(event.ctrlKey && event.keyCode==67){
　　　　alert('你按下了CTRL+C')
　　}
});

以下是详细的keyCode值列表，供开发者参考。

keydown、keypress与keyup事件详解

接下来深入解析js中的keyup、keypress和keydown事件。

js中的keyup、keypress和keydown事件均属于键盘相关的事件类型。

当现代浏览器中任何一个按键被按下（pressed）或释放（released）时，都会触发三种客户端事件。

keydown event keypress event keyup event

keydown事件在键盘键被按下的瞬间触发，随后通常会触发keypress事件。而keyup事件则在按键被释放时触发。

这三个事件在页面中的具体使用方法如下例所示：

<input id="testkeyevent" name="testkeyevent" onKeyUp="keyup()" /> <input id="testkeyevent" name="testkeyevent" onkeypress="keypress()" /> <input id="testkeyevent" name="testkeyevent" onkeydown="keydown()" />

对应的JavaScript处理函数如下：

function keyup(){ ...} function keypress(){ ...} function keydown(){ ...}

三种键盘事件的关键区别

需要注意以下几点关键区别：

KeyDown触发后，不一定触发KeyUp。例如，当KeyDown按下后若拖动鼠标，则不会触发KeyUp事件。 KeyPress主要用于捕获数字（包括Shift+数字的符号）、字母（包括大小写）、小键盘等ANSI字符，但不包括F1-12、SHIFT、Alt、Ctrl、Insert、Home、PgUp、Delete、End、PgDn、ScrollLock、Pause、NumLock、{菜单键}、{开始键}和方向键。 KeyDown和KeyUp通常可以捕获键盘上除了PrScrn之外的所有按键（此处不讨论特殊键盘的特殊键）。 KeyPress仅能捕获单个字符。 KeyDown和KeyUp可以捕获组合键。 KeyPress可以捕获单个字符的大小写状态。 KeyDown和KeyUp对于单个字符捕获的KeyValue是相同的，因此无法通过它们判断单个字符的大小写。 KeyPress不区分小键盘和主键盘的数字字符。 KeyDown和KeyUp则区分小键盘和主键盘的数字字符。 其中，PrScrn按键无论使用KeyPress、KeyDown还是KeyUp都无法捕获。

组合键与特殊按键的处理策略

在使用键盘时，通常会用到CTRL+SHIFT+ALT等组合键功能。那么如何判定这些组合键呢？

可以通过KeyUp事件来处理（这里说明一下为什么不用KeyDown，因为在判定KeyDown的时候，CTRL、SHIFT和ALT属于一直按下状态，然后再加另外一个键是不能准确捕获组合键，所以使用KeyDown是不能准确判断出的，要通过KeyUp事件来判定）。

这里简单列举出CTRL+其它键的组合判定代码：

private void Form3_KeyUp(object sender, KeyEventArgs e){
if (e.Control){
MessageBox.Show("KeyUp:Ctrl+" + e.KeyValue.ToString());
}
}

捕获PrScrn按键事件

完整keyCode值对照表

通过一种钩子的方式可以判定PrScrn按键事件，钩子可以获取任何键盘事件。 以下是一些键盘上的键对应的Code：以下是一些键盘上的键对应的Code：

总结

以上所述是小编给大家介绍的使用JS监听键盘按下事件（keydown event），希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对本站网站的支持！ 如果你觉得本文对你有帮助，欢迎转载，烦请注明出处，谢谢！