您的位置:

详解keyup和keydown事件

一、key和keys的区别

键盘事件中经常会出现key和keys这两个术语,它们之间的区别是:key表示按下的是哪个键,而keys表示同时按下的多个键的组合情况。

例如:

// 键盘事件中获取到按下的键值
document.addEventListener('keydown', function(event) {
  console.log(event.key);
});

// 键盘事件中获取到同时按下的键值组合
document.addEventListener('keydown', function(event) {
  console.log(event.keys);
});

以上代码中,在keydown事件中,通过监听event.key可以获取到按下的具体键值,同时监听event.keys可以获取到当前按下的多个键值组合(当按下shift、ctrl、alt、meta键时)。

二、keydown是什么事件

keydown事件在按下键盘上的任意一个键时触发,常用于实现在输入框中监听按键输入的操作。

例如:

var input = document.querySelector('input');
input.addEventListener('keydown', function(event) {
  if (event.key === 'Enter') { // 当按下Enter键时
    console.log('你按下了Enter键');
  }
});

以上代码中,在监听输入框的keydown事件时,判断按下的键值是否为Enter,从而实现相应的操作。

三、keyone和key2区别

keyone和key2并不是键盘事件中的术语,这里假设指的是在键盘事件中的key和keyCode这两个属性。

key是事件属性,表示按下的是哪个键,keyCode是事件属性,表示按下的是哪个键的键码值。

例如:

var input = document.querySelector('input');
input.addEventListener('keydown', function(event) {
  console.log(event.key); // 按下的键
  console.log(event.keyCode); // 按下的键的keyCode
});

以上代码中,通过监听输入框的keydown事件,分别通过event.key和event.keyCode来获取到按下的键和键码值。

四、输入框中获取按键输入

在输入框中获取按键输入的功能在实际开发中非常常见,它可以通过监听输入框的keydown或keyup事件来实现。

例如:

var input = document.querySelector('input');
input.addEventListener('keyup', function(event) {
  console.log(input.value); // 获取输入框中的值
});

以上代码中,在监听输入框的keyup事件时,通过input.value来获取输入框中的值,从而实现获取按键输入的操作。

五、阻止默认事件

在一些情况下,我们需要阻止默认的键盘事件,例如阻止按下Backspace键时浏览器自动返回历史记录。

可以通过event.preventDefault()来阻止事件的默认行为。

例如:

document.addEventListener('keydown', function(event) {
  if (event.key === 'Backspace') {
    event.preventDefault();
  }
});

以上代码中,在监听document的keydown事件时,判断按下的键是否为Backspace,如果是则通过event.preventDefault()阻止浏览器自动返回历史记录。

六、总结

keyup和keydown是常用的键盘事件,它们分别在释放按键和按下按键时触发,常用于实现输入框的输入、阻止默认键盘事件等功能。

在使用键盘事件时,需要注意key和keyCode、key和keys之间的区别,根据具体的需求选择相应的事件和属性。