目录
一.常用的键盘事件
1.onkeyup
2.onkeydown
3.onkeypress
4.三个事件的执行顺序
二.常用的键盘事件对象
1.keyCode（已弃用）
2.ASCII码表
3.KeyboardEvent.key
三.案例：模拟京东按键定位搜索框
1.思路分析：
2.效果图
3. 代码实现
四.案例：模拟京东快递单号查询
1.思路分析
2.代码实现
3.效果图
一.常用的键盘事件
1.onkeyup
onkeyup某个键盘按键被松开时触发
//1.onkeyup某个键盘按键被松开时触发
document.addEventListener('keyup',function(e){
console.log('我弹起了');
})2.onkeydown
.onkeydown某个键盘按键被按下时触发
//2.onkeydown某个键盘按键被按下时触发
document.addEventListener('keydown',function(e){
console.log('我按下了');
})3.onkeypress
onkeypress某个键盘按键被按下时触发︰但是它不识别功能键比如ctrl shift箭头等
//3.onkeypress某个键盘按键被按下时触发︰但是它不识别功能键比如ctrl shift箭头等
document.addEventListener('keypress',function(e){
console.log('我按下了');
})4.三个事件的执行顺序
keydown>keypress>keyup
<script>
//1.onkeyup某个键盘按键被松开时触发
document.addEventListener('keyup',function(e){
console.log('我弹起了');
})
//2.onkeydown某个键盘按键被按下时触发
document.addEventListener('keydown',function(e){
console.log('我按下了keydown');
})
//3.onkeypress某个键盘按键被按下时触发︰但是它不识别功能键比如ctrl shift箭头等
document.addEventListener('keypress',function(e){
console.log('我按下了keypress');
})
</script>运行结果如图所示：
二.常用的键盘事件对象
1.keyCode（已弃用）
keyCode属性可以得到相应键的ASCII码值
已弃用: 不再推荐使用该特性。虽然一些浏览器仍然支持它，但也许已从相关的 web 标准中移除，也许正准备移除或出于兼容性而保留。请尽量不要使用该特性。请注意，该特性随时可能无法正常工作。详情可见KeyboardEvent.keyCode - Web API 接口参考 | MDN (mozilla.org)
//键盘事件对象中的keyCode属性可以得到相应键的ASCII码值
//字母不区分大小写
document.addEventListener('keyup',function(e){
console.log(e.keyCode);//a：65 A：65
})2.ASCII码表
3.KeyboardEvent.key
只读属性 KeyboardEvent.key 返回用户按下的物理按键的值。它还与 shiftKey 等调节性按键的状态和键盘的区域 / 和布局有关。
//键盘事件对象中的key返回用户按下的物理按键的值
document.addEventListener('keyup',function(e){
alert("你按下了"+e.key+'键');//a:a A:A 3:3 enter:enter
})运行结果
三.案例：模拟京东按键定位搜索框
1.思路分析：
核心思路︰检测用户是否按下了s键，如果按下s键，就把光标定位到搜索框里面
使用键盘事件对象里面的keyCode判断用户按下的是否是s键
搜索框获得焦点∶使用js 里面的focus()方法
2.效果图
3. 代码实现
<body>
<input type="text">
<script>
//获取元素
var search = document.querySelector('input');
//keydown某个键盘按键被按下时触发
document.addEventListener('keyup',function(e){
//判断用户是否按下了s键
if (e.key=='s') {
console.log(e.key);
//搜索框获得焦点
search.focus();
}
})
</script>
</body>四.案例：模拟京东快递单号查询
1.思路分析
1.快递单号输入内容时， 上面的大号字体盒子（con）显示(这里面的字号更大）
2.表单检测用户输入： 给表单添加键盘事件
3.同时把快递单号里面的值（value）获取过来赋值给 con盒子（innerText）做为内容
4.如果快递单号里面内容为空，则隐藏大号字体盒子(con)盒子文章来源：https://www.toymoban.com/news/detail-485803.html
2.代码实现
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
.search {
position: relative;
width: 178px;
margin: 100px;
}
.con {
display: none;
position: absolute;
top: -40px;
width: 171px;
border: 1px solid rgba(0, 0, 0, .2);
box-shadow: 0 2px 4px rgba(0, 0, 0, .2);
padding: 5px 0;
font-size: 18px;
line-height: 20px;
color: #333;
}
.con::before {
content: '';
width: 0;
height: 0;
position: absolute;
top: 28px;
left: 18px;
border: 8px solid #000;
border-style: solid dashed dashed;
border-color: #fff transparent transparent;
}
</style>
</head>
<body>
<div class="search">
<div class="con">123</div>
<input type="text" placeholder="请输入您的快递单号" class="jd">
</div>
<script>
//获取元素
var con = document.querySelector('.con');
var jd_input = document.querySelector('.jd');
// 表单检测用户输入： 给表单添加键盘事件
jd_input.addEventListener('keyup', function () {
//判断搜索框内容是否为空
if (this.value == '') {
con.style.display = 'none';
} else {
con.style.display = 'block';
//把快递单号里面的值获取过来赋值给 con盒子做为内容
con.innerHTML = this.value;
}
})
// 当我们失去焦点，就隐藏这个con盒子
jd_input.addEventListener('blur', function () {
con.style.display = 'none';
})
// 当我们获得焦点，就显示这个con盒子
jd_input.addEventListener('focus', function () {
if (this.value !== '') {
con.style.display = 'block';
}
})
</script>
</body>3.效果图
文章来源地址https://www.toymoban.com/news/detail-485803.html
到了这里，关于JavaScript——常用的键盘事件的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
