百度前端技术学园

# 键盘事件

# 课程目标

前面我们学习了事件基础知识，今天我们重点掌握键盘事件

# 阅读

JavaScript 键盘事件可帮助捕获用户与键盘的交互.

监听 keydown 和 keyup 事件可以知道当用户在键盘上输入的字符，这样可用于实现键盘快捷键。

keydown 和 keyup 之间的唯一区别是: keydown 在用户开始按下按钮和输入字符之前触发.keyup 在输入字符后触发。

对于大多数情况，您最终需要触发 keyup 事件， 这些事件可以添加到 document 或文本框内（以了解用户何时在页面上的任何位置按下了键）。

document.addEventListener("keydown", (event) => {
  console.log(event.key);
});

document.addEventListener("keyup", (event) => {
  console.log(event.key);
});

您可以在键盘事件游乐场 (opens new window) 感受一下就按下键盘事件触发,直观看到 event.key 和 event.code 值的键列表。

请阅读下面文档，深入学习键盘事件相关知识：

# 任务一

请你实现一个电话簿检索功能

  1. 实现检索功能，可以按照名称和电话号码进行搜索，输入一个字符，自动筛选出符合条件的电话簿信息，展示在下方
  2. 实现检索输入框的过滤，只能输入字母键，数字键，方向键和删除键，如果输入为其他键值，不接受其他按键。
  3. 搜索应该不区分大小写

实现效果参考下方：

# 任务二

参照如下示例图，实现利用键盘来控制小方块的移动

  • 按上键，小方块向上移动，按下键，小方块向下移动，左右键也是一样
  • 同时按下 ctrl 键和方向键时，可以加快小方块的移动速度

# 自测问题

  • event.key 和 event.code 有什么区别？
  • 当按下键盘时，会连续触发多个事件，说说是哪些事件，她们是按什么顺序触发？
  • 如果按下字符键不放，哪两个事件会被一直触发？
  • 如果按下非字符键不放，有几个事件会被一直触发？是哪些事件？

# 进阶任务

如果你很快就完成上面的任务，可以去 LeetCode 上去多进行一些练习。

# 提交

把你今天觉得做得最好的代码放在 Github 后进行提交。

# 总结

依然把今天的学习用时，收获，问题进行记录。

← 鼠标事件 →