🌊🌈关于前言：

文章部分内容及图片出自网络，如有问题请与我本人联系(主页介绍中有公众号)

本博客暂适用于刚刚接触JS以及好久不看想要复习的小伙伴。

🌊🌈关于内容：

下述内容所属本专栏系列-第七部分 DOM下

7.9_键盘事件

7.9.1_键盘事件的常用方法

键盘事件是指用户在使用键盘时触发的事件。例如，用户按 Esc 键关闭打开的状态栏，按 Enter 键直接完成光标的上下切换等。

键盘事件：

事件名称	事件触发时机
keypress	某个键盘按键被按下时触发。不识别功能键，如Ctrl、 Shift、箭头等
keydown	某个键盘按键被按下时触发
keyup	某个键盘按键被松开时触发

需要注意的是，keypress 事件保存的按键值是 ASCII 码，keydown 和 keyup 事件保存的按键值是虚拟键码，keydown 和 keypress 如果按住不放的话，会重复触发该对应事件。keyup 和 keydown 事件不区分字母大小写，而 keypress 区分字母大小写。

在发生 keydown 和 keypress 事件时，event 事件对象的 keycode 属性会包含一一个值，该值与键盘上的特定值对应。keycode 的值与 ASCII 码对应的值相同，例如，keycode 值为13 表示 Enter 键，keycode 值为 9 表示 Tab 键。读者可参考 MDN 等手册进行查看，此处不再详细列举。

7.9.2_键盘事件对象

键盘事件也有相应的键盘事件对象 KeyBoardEvent，该对象是跟键盘事件相关的一系列信息的集合。根据键盘事件对象中的 keyCode 属性可以得到相应的 ASCII 码值，进而可以判断用户按下了哪个键。

案例：检测用户是否按下了 s 键，如果按下 s 键，就把光标定位到搜索框里面，

<body>
<input type="text">
<script>
var search = document.querySelector('input');
document.addEventListener('keyup', function (e) {
if (e.keyCode == 83) {
search.focus ();
}
});
</script>
</body>

上述代码中，第 5 行代码绑定了鼠标弹起事件，当输入完毕后再进行检测。第 6 ~ 8 行代码使用键盘事件对象里面的 keyCode 判断用户按下的是否是 s 键，如果是，则让搜索框获取焦点，帮助用户进行输入。

7.9.3_[ 案例 ] 文本框提示信息

在现实生活中，我们经常会使用快递单号查询功能，查看商品的物流信息状态。有时在用户输人单号时，网站为了让用户看清楚输人的内容，会在文本框上方显示一个提示栏，将用户输人的数字放大，

案例：为当用户在文本框中输人内容时，文本框上面自动显示大号字的内容。如果用户输人为空，需要隐藏大号字内容。本案例的具体实现步骤如下，

(1) 编写 HTML 代码完成页面布局。

<body>
<div class="search">
<div class="con"></div>
<label>快递单号:
<input type="text" placeholder="请输人您的快递单号" class="num">
</label>
</div>
</body>

上述代码中，第 3 行代码定义了类名为 con 的 div 元素，用来显示用户输人的大号字内容。第 5 行的 < input> 标签用来显示用户输入内容。

(2) 检测用户输人，给表单添加键盘事件，示例代码如下。

<script>
var con = document.querySelector('.con');
var numInput = document.queryselector('.num');
numInput.addEventListener('keyup', function () {
if (this.value == '' ) {
con.style.display = 'none';
} else {
con.style.display = 'block';
con.innerText = this.value;
}
});
</script>

上述代码中，第 2、3 行代码获取 con 和 num_input 对象。第 4 行代码为给 numInput 表单对象添加 keyup 事件，在用户输入完毕之后，进行内容检测。第 5 ~ 10 行代码为通过 if 语句进行判断，如果输人内容为空，则隐藏 con 元素，否则显示 con 元素，同时把快递单号里面的值 ( value ) 获取过来赋值给 con 盒子 ( innerText) 作为内容。

(3) 失去焦点，隐藏 con 元素。

在第 (2) 步的第 11 行之后，编写如下代码，实现文本框失去焦点，隐藏 con 元素。

num_input.addEventListener('blur', function() {
con.style.display = 'none';
});

(4) 获得焦点，显示con元素。

在第 (3) 步代码之后，编写如下代码，实现文本框获取焦点，显示 con 元素。

num input.addEventListener('focus', function ) {
con.style.display = 'block';
});

完成上述代码后，通过浏览器访问测试即可。

🌊🌈往期回顾：

HTML入门指南学习专栏「已完结」:

Javascript入门指南学习专栏「更新中」:

🌊🌈关于后记：

感激相遇你好我是阿ken
个人微信：wlpchaojibang 有问题请随时与我交流，一个人可以走的很快，但一群人才可以走的更远!

「关注」：提高学习效率！

👍🏻：原创不易，适当鼓励！

⭐：收藏文章，温故知新！

💬：评论交流，共同进步！

【JS干货分享 | 建议收藏】挑战最短时间带你走进JS（二十四）