WEB前端教程：键盘事件

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

课程目标

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

阅读

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 值的键列表。

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

任务一

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

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

实现效果参考下方：

任务二

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

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

自测问题

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

进阶任务

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

提交

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

总结

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

更多相关技术内容咨询欢迎前往并持续关注六星社区了解详情。

长按或扫描下方二维码，免费获取 Python公开课和大佬打包整理的几百G的学习资料，内容包含但不限于Python电子书、教程、项目接单、源码等等

发表于 2022-10-26 10:45
阅读 ( 509 )
分类：WEB前端开发