JS_键盘事件详解

简介

关于键盘事件，分为三种，其中keydown事件发生在键盘的键被按下的时候，接下来触发keypress事件，最后在按键被释放时触发keyup事件。

用法如下

1
2
3

document.addEventListener('keyup', function(e) {});
document.addEventListener('keypress', function(e) {});
document.addEventListener('keyup', function(e) {});

特殊按键如PrScrn键是不会被捕获到的，其他的键盘事件请注意：

keydown、keyup事件

keydown触发后，不一定立即触发keyup，可以按下不松手持续一段时间得到多个keydown事件，或者当keydown按下后，拖动鼠标，那么将不会触发keyup事件。
keydown和keyup区分小键盘和主键盘的数字字符，这两种输入得到的keyCode是不同的。
keydown和keyup不区分单个字符大小写情况，这两种输入得到的keyCode是相同的。

keypress事件

KeyPress主要用来捕获数字(注意：包括Shift+数字的符号)、字母（注意：包括大小写）、小键盘等除了F1-12、SHIFT、Alt、Ctrl、Insert、Home、PgUp、Delete、End、PgDn、ScrollLock、Pause、NumLock、{菜单键}、{开始键}和方向键外的ANSI字符
KeyPress 可以捕获单个字符的大小写，得到的keyCode值是符合ascii码表里对应的大小写字母值。
KeyPress 不区分小键盘和主键盘的数字字符，得到的keyCode相同。

keydown和keyup的keyCode说明

注意keypress的按键keyCode和ascii码表值相同。

捕获正常的字母和数字

如果不希望匹配到如ctrl+c这样的组合键里的c，则需要使用keypress事件。

1
2
3
4
5
6
7

document.addEventListener('keypress', function (e) {
    if (e.keyCode >= 48 && e.keyCode <= 57 ||
        e.keyCode >= 65 && e.keyCode <= 90 ||
        e.keyCode >= 97 && e.keyCode <= 122) {
        console.log(e.keyCode);    
    }
});

捕获ctrl+c组合键

捕获组合键注意mac和windows的差异，控制键有以下四种，对应键盘事件event的以下四个属性

ctrlKey — Ctrl键
shiftKey — Shift键
altKey — Alt键
metaKey — command键（Mac下），此属性只能在mac中需要keydown事件才能得到正确的值。

1
2
3
4
5

document.addEventListener('keydown', function (e) {
    if (e.keyCode === 67 && (e.ctrlKey || e.metaKey)) {
        console.log('ctrl + c');
    }
}, false);

• ← Previous Post
• Next Post →