JavaScript键盘事件

🧑‍🎓 个人主页：《爱蹦跶的大A阿》

🔥当前正在更新专栏：《VUE》 、《JavaScript保姆级教程》、《krpano》、《krpano中文文档》

​ 

​

✨ 前言

        键盘事件可以帮助我们响应用户的按键输入,是实现网页交互的重要方式之一。本文将详细介绍键盘事件的种类、属性和在JavaScript中的使用方式。

        相信学习后,大家不仅可以处理各种键盘活动,还可以创造键盘热键、键盘游戏等丰富的交互体验。让我们开始学习之旅吧!

​

✨ 正文

本文介绍最常用的键盘事件。

keydown 和 keyup

• keydown - 按键被按下时触发。
• keyup - 按键被松开时触发。

  input.onkeydown = function(e) {
    if (e.key == 'Enter') {
      alert('Enter pressed!'); 
    }
  };
  
  input.onkeyup = function(e) {
    if (e.key == 'Enter') {
      alert('Enter released');
    }
  };

这两个事件不区分字母大小写。

keypress

keypress 事件在按键被按下并产生字符时触发。特点是:

• 区分字母大小写。
• 特殊键(Shift、Esc 等)没有字符,不会触发。

  input.onkeypress = function(e) {
    // 获取输入的字符
    if (e.key == 'a') { 
      alert('a pressed'); 
    }
  };

跟踪按键组合

跟踪多个按键的组合按下,例如 “Ctrl+C”:

document.onkeydown = function(e){
  if (e.ctrlKey && e.key == 'c') {
    alert('Ctrl+C');
  }
};

直接访问 e.code 也可以获取物理按键名。

事件属性

键盘事件对象包含了按键详细信息,常用的属性有:

• key: 按键的字符(字母或数字)
• code: 按键的物理代码
• altKey、ctrlKey、shiftKey: 对应按键是否同时按下
• repeat: 是否因为按键被重复触发

例子:

elem.onkeydown = function(e) {
  console.log(e.key); // "a"
  console.log(e.code); // "KeyA"
  console.log(e.altKey); // false 
  console.log(e.repeat); // true(长按键时)
}

默认行为

某些按键组合会触发浏览器默认行为,可以通过 event.preventDefault() 来防止:

document.onkeydown = function(e) {
  if (e.key == 'F1') {
    e.preventDefault(); // 防止浏览器打开帮助页
  }
};

自动重播

对于长按按键,事件会自动重播。我们可以区分首次按下与重播事件:

let firstTime = true;

elem.onkeydown = function(e) {
  if (firstTime) {
    firstTime = false;
    return;
  }

  // 重复触发的代码
};

elem.onkeyup = () => firstTime = true; // 重置开关

 

✨ 结语

        键盘提供了极为重要的用户输入方式。学习使用键盘事件可以让我们更好地控制交互逻辑,优化用户体验。

        本文详细介绍了键盘事件的种类和属性,并通过示例展示了跟踪键盘组合和处理自动重复事件的方法。希望这篇博客能够全面提高大家对键盘事件的理解与应用。如果有任何问题,欢迎在评论区交流。

​