前端实战11：JS获取按键的键盘码信息

大家好，我是宝哥。

今天要分享的是前端实战项目系列中的第11个项目，一个关于事件键码的有趣实验。下面是具体的实现代码，包括HTML、CSS和JavaScript。

这个项目来源于Brad Traversy的GitHub仓库，一个包含50个迷你Web项目的集合，每个项目都使用HTML、CSS和JavaScript实现。这些项目旨在帮助开发者通过实践提升前端技能。

项目介绍

本项目旨在演示如何获取键盘按下时的键码信息。用户可以在页面上点击任意按键，页面将会显示该按键的键名 (event.key)、键码 (event.keyCode) 和字符代码 (event.code)。

源码下载地址

https://github.com/bradtraversy/50projects50days/tree/master/event-keycodes

在线预览(文末原文链接直达）：

https://qdkfweb.cn/50projects50days/event-keycodes/

前端实战项目系列正在更新：11/50

• 01：可展开卡片

• 02：进度条

• 03：旋转导航动画

• 04：隐藏的搜索小组件

• 05：模糊加载效果

• 06：滚动动画

• 07：拆分页面

• 08：表单输入框波纹

• 09：音频播放按钮面板

• 10：简洁的冷笑话生成器

• 11：事件键盘码

基本原理

1. 项目通过 HTML 创建一个用来显示按键信息的区域 (div id="insert")。

2. 使用 JavaScript 为 window 对象添加 keydown 事件监听器。

3. 当用户按下键盘按键时，事件监听器会触发并执行回调函数。

4. 回调函数首先会根据 event.key 属性获取按下的按键名称。

5. 然后，分别获取 event.keyCode 和 event.code 的值。

6. 最后，将获取到的按键信息动态插入到 div id="insert" 区域中。

HTML 结构

包含一个 <div> 元素作为按键信息显示区域 (id="insert")。

<div id="insert">
  <div class="key">
    Press any key to get the keyCode
  </div>
</div>

CSS 样式

为按键信息显示区域 (div.key) 定义样式，包括边框、背景色、阴影、字体大小、对齐方式等。

本项目CSS代码主要用于定义页面整体布局、按键信息显示区域样式以及按键信息文本样式。

1. 页面整体布局

body {
  background-color: #e1e1e1;
  font-family: 'Muli', sans-serif;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  height: 100vh;
  overflow: hidden;
  margin: 0;
}

• display: flex;: 将页面布局设置为 flex 布局。

• align-items: center;: 垂直方向上将子元素居中对齐。

• justify-content: center;: 水平方向上将子元素居中对齐。

• height: 100vh;: 设置页面高度为 100% 视窗高度。

技术难点：flex 布局

flex 布局是一种新的布局模式，它提供了更灵活、更强大的布局方式，可以轻松实现各种复杂布局。flex 布局的主要难点在于理解其布局规则和属性。

本项目中，使用 flex 布局将页面垂直居中并水平居中，代码简洁易懂。

2. 按键信息显示区域样式

.key {
  border: 1px solid #999;
  background-color: #eee;
  box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.1);
  display: inline-flex;
  align-items: center;
  font-size: 20px;
  font-weight: bold;
  padding: 20px;
  flex-direction: column;
  margin: 10px;
  min-width: 150px;
  position: relative;
}

• display: inline-flex;: 将按键信息显示区域设置为内联 flex 布局，使其能够在同一行展示多个按键信息。

• align-items: center;: 垂直方向上将按键信息居中对齐。

• flex-direction: column;: 设置 flex 布局的方向为垂直方向，即按键信息上下排列。

技术难点：内联 flex 布局

内联 flex 布局是指将 flex 布局应用于内联元素，使其能够在同一行展示多个子元素。内联 flex 布局可以用来制作导航栏、按钮组等。

本项目中，使用内联 flex 布局将按键信息垂直排列，并使每个按键信息的宽度自动填充剩余空间。

3. 按键信息文本样式

.key small {
  position: absolute;
  top: -24px;
  left: 0;
  text-align: center;
  width: 100%;
  color: #555;
  font-size: 14px;
}

JavaScript 代码

1. 获取 div id="insert" 元素的 DOM 引用。

2. 为 window 对象添加 keydown 事件监听器，并传入一个回调函数。

3. 回调函数内部首先根据 event.key 属性获取按下的按键名称，并处理空格键的特殊情况。

4. 然后，分别获取 event.keyCode 和 event.code 的值。

5. 最后，使用 DOM 操作将按键信息动态插入到 div id="insert" 区域中。

const insert = document.getElementById('insert')

window.addEventListener('keydown', (event) => {
  insert.innerHTML = `
  <div class="key">
  ${event.key === ' ' ? 'Space' : event.key} 
  <small>event.key</small>
</div>

<div class="key">
  ${event.keyCode}
  <small>event.keyCode</small>
</div>

<div class="key">
  ${event.code}
  <small>event.code</small>
</div>
  `
})

总结

以上就是所有内容，最后我们再总结一下学到的知识点：

• 本项目主要讲解了如何获取键盘事件的键码信息。

• 键盘事件提供了多种属性来获取按键相关信息，例如 event.key、event.keyCode 和 event.code。

• 可以根据实际需求选择合适的属性来获取所需的按键信息。

额外说明

• 在实际开发中，除了显示按键信息之外，还可以利用键盘事件来实现各种功能，例如快捷键操作、游戏控制等。

• 不同的浏览器可能对键盘事件的支持存在细微差异，在开发过程中需要注意兼容性问题。

最后

如果你觉得宝哥今天的尝试对你有帮助，就给我点个赞，关注一波。分享出去，也许你的转发能给别人带来一点启发。

推荐链接

10张脑图带你快速入门Vue3 | 附高清原图

前端程序员简历模板整理和下载

小抄学习法: 4张图掌握JS核心要点

分享和在看就是最大的支持❤️