[油猴脚本开发指南]键盘事件的监听

李恒道

键盘监听

我们可以在实现网页的功能的时候，如果不想做界面，或者做一些需求的时候，可以使用键盘监听，这样不仅你可以更好的完成自己开发的需求，在一些特定的情况下，我们也可以事件代码的复用，来来回回批量生成jio本

键盘事件类型

通常键盘事件分为三种

keydown

keypress

keyup

我们先一个一个来了解

keydown

keydown的触发时机是在键盘按键按下的时候

所有的按键都会触发keydown事件，无论按键是否产生字符值(ctrl等功能键不产生字符)

使用实例

const input = document.querySelector('input');
const log = document.getElementById('log');

input.addEventListener('keydown', logKey);

function logKey(e) {
  log.textContent += ` ${e.code}`;
}

Tips

自Firefox 65起，keydown与keyup事件会在ime输入中文的时候被触发，如果需要忽略输入过程中的keydown事件，可以按照如下代码修改

中文输入在keydown阶段keycode为229

而isComposing代表正在输入状态

eventTarget.addEventListener("keydown", event => {
  if (event.isComposing || event.keyCode === 229) {
    return;
  }
  // do something
});

Keypress

mdn宣称此事件已被弃用，不在推荐使用此功能，尽管某些浏览器仍然支持，但可能随时停止工作

所以我们这里不在赘述

可以使用keydown代替

keypress通常是在产生字符值的时候触发事件

产生字符值的有字母，数字，标点等按键，不产生字符的如alt，shift，ctrl等，则不会触发该事件

注意，此事件已被废弃

Keyup

keyup为按键松开的时候触发，keydown与key事件共同提供哪个键是被按下的代码

而Keypress则代表哪个字符被输入

例如小写字母a在keydown和keyup都为65，但是在keypress是指哪些字符被输入，并非小写a，而为大写A

Tips

Keyup与keydown相同，在输入法的时输入的时候被触发，如果要忽略输入过程中，请参考上方代码

使用示例

const input = document.querySelector('input');
const log = document.getElementById('log');

input.addEventListener('keyup', logKey);

function logKey(e) {
  log.textContent += ` ${e.code}`;
}

结语

那么这节课我们就简单学习了键盘按键的相关内容

我们不仅可以使用addeventlistener做监听，也可以直接onxxx的形式对某个元素进行设置监听

但是更推荐addeventlistener哦

撒花~

Hangover

获取按下键盘按键对应的键值方法👇

1. window.addEventListener('keydown' , (e) => {
   
2.     console.log(e.keyCode);
   
3. })
   
4. //or
   
5. window.onkeydown = (e) => {
   
6.     console.log(e.keyCode);
   
7. }

复制代码

lidasha521

ggnb 学习了