本文介绍了键盘事件，包括keypress、keydown和keyup，以及如何利用它们监听用户输入。通过示例代码展示了如何检测用户是否按下特定键（如s键）并进行相应操作。此外，还提供了一个实际案例，说明如何在文本框输入时实时显示放大版的输入内容，并在失去焦点时隐藏。通过添加键盘事件，可以增强网页应用的交互性和用户体验。
一、键盘事件的常用方法
键盘事件是指用户在使用键盘时触发的事件。例如，用户按Esc键关闭打开的状态栏，按Enter键直接完成光标的上下切换等。常用的键盘事件如下表所示。
| 事件名称 | 事件触发时机 |
| keypress | 某个键盘按键被按下时触发，不识别功能键，如Ctrl、Shift、箭头等 |
| keydown | 某个键盘按键被按下时触发 |
| keyup | 某个键盘按键被松开时触发 |
注意：keypress事件保存的按键值是ASCII码，keydown和keyup事件保存的按键值是虚拟键码，keydown和keypress如果按住不放的话，会重复触发该对应事件。keyup和keydown事件不区分字母大小写，而keypress区分字母大小写。
二、键盘事件对象
键盘事件对象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>
三、案例（文本框提示信息）
案例需求：在现实生活中，我们经常会使用快递单号查询功能，查看商品的物流信息状态。有时在用户输入单号时，网站为了让用户看清楚输入的内容，会在文本框上方显示一个提示栏，将用户输入的数字放大。
案例分析：当用户在文本框中输入内容时，文本框上面自动显示大号字的内容。如果用户输入为空，需要隐藏大号字内容。
浏览器预览效果如下图所示：
1、编写HTML代码
<body>
<div class="search">
<div class="con"></div>
<label>快递单号：
<input type="text" placeholder="请输入您的快递单号" class="num">
</label>
</div>
</body>
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>
3、失去焦点，隐藏con元素
num_input.addEventListener('blur', function() {
con.style.display = 'none';
})
4 、获得焦点，显示con元素
num_input.addEventListener('focus', function() {
con.style.display = 'block';
})
扫一扫
1851
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
