如何获取网页按键信息？

155次阅读

共计 2245 个字符，预计需要花费 6 分钟才能阅读完成。

用户在网页上经常会有各种各样的操作，作为开发者来说，如果我们想分析用户在网页上到底按了哪些键，该如何去做呢？本文就来掰扯掰扯。

首先，我们的目的是想要知道用户在网页上按了哪些键，比如说“回车键”、“空格键”、“数字 1”等等，那么首要条件是先去拿到用户按键，怎么做呢？

按键监听

按键监听有两种方式：

keydown 事件

document.addEventListener('keydown', (event) => {console.log('keydown', event); // 此时的 event 对象就是 KeyboardEvent 对象，我们可以通过它拿到按键相关的信息
});

keyup 事件

document.addEventListener('keyup', (event) => {console.log('keyup', event); // 此时的 event 对象就是 KeyboardEvent 对象，我们可以通过它拿到按键相关的信息
});

两种方法都可以拿到 KeyboardEvent 对象，keydown事件发生在 keyup 之前，前者表示键盘按下去，后者表示键盘松开。

那么二者有什么区别呢？这里先卖个关子，我们后面会说。

识别按键信息

通过前面的事件，我们拿到了关键的 KeyboardEvent 对象，通过这个对象的一些属性和方法，我们就可以知道按键的信息。

单个按键

首先我们来看最基本的单个按键，也就是同时只按了一个键，这个时候我们想知道按了哪些键有几种方法，我们来看下面这个表格：

实际按键	keyCode	code	key	location
数字 1	49	Digit1	1	0
感叹号!	49	Digit1	!	0
小写字母 k	75	KeyK	k	0
大写字母 K	75	KeyK	K	location
中文输入法下按 k	229	KeyK	k	location
回车键	13	Enter	Enter	0
空格键	32	Space		0
+ 号	187	Equal	+	0
= 号	187	Equal	=	0
上方向键	38	ArrowUp	ArrowUp	0
左 Shift	16	ShiftLeft	Shift	1
右 Shift	16	ShiftRight	Shift	2

通过这个表格，我们可以发现几个问题。

keyCode

首先，keyCode是代表物理按键对应的数字，但是我们可以发现这些数字是根本无法一眼看出来到底是什么按键，只能去查表，而且对于同一个按键有不同含义也无法区分。

还有一点要注意的是，如果在 keydown 事件下，开启了中文输入法，在没有输入完文字的时候，所有按键都会被识别为 keyCode=229，而只有在keyup 事件监听下，真正的 keyCode 才会被识别出来。这也是前面提到的 keydown 和keyup事件的区别。

所以，单靠 keyCode 是无法区分出按键的，特别是后面出了 code 和key属性后，keyCode这个属性也逐渐被废弃了，不推荐使用。

code 和 key

这两个属性都代表了按键的实际含义，但在表现形式上又有所区别。

可以看到，code基本代表着物理按键代表的英文含义，而 key 则更加简洁，也代表着按键的含义，但二者又有些区别。

code是根据物理按键布局来获取键盘信息的，但是如果实际字符和物理按键有区别，则检测不出来。

例如，QWERTY 布局键盘上的“q”键返回的 code 是“KeyQ”，但 Dvorak 键盘上的“’”键和 AZERTY 键盘上的“a”键也返回的相同 code 值。这使得如果用户没有使用预期的键盘布局，则无法使用 code 值来确定用户按键的名称。这个时候 key 的值可以显示实际的按键。

比如 + 和=在同一个按键，此时 code 都显示为 ’Equal’，而 key 则能区分出 ’+’ 和 ’-‘。

location

我们知道有些按键分左右，比如 Ctrl、Alt 之类的，location则是用来区分按键的位置。

location=0是默认值，没有左右区分。

location=1代表左边按键，比如表格中的左 Shift；而 location=2 代表右边按键，比如表格中的左 Shift。

location=3代表 NumLock 被锁定，这个一般不常见。

综合考虑，我们可以通过将 key 和location组合起来，并且用 keyup 事件监听，就可以得到用户在输入过程中实际按的键位是什么了。

组合键

有的时候我们不止按下一个按键，比如各种组合键：Ctrl+c、Ctrl+v、Shift+a等等。如果想判断用户按了什么键，可以结合以下属性来判断：

document.addEventListener('keyup', (event) => {console.log('key:', event.key);
  console.log('location:', event.location);
  console.log('altKey:', event.altKey);  // 是否按下了 alt 键(Mac 下表示 Option 键)
  console.log('ctrlKey:', event.ctrlKey);  // 是否按下了 ctrl 键
  console.log('metaKey:', event.metaKey);  // 是否按下 Meta 键（在 MAC 键盘上，表示 Command 键（⌘），在 Windows 键盘上，表示 Windows 键（⊞））console.log('shiftKey:', event.shiftKey);  // 是否按下了 shift 键
});