<body>
<input type="text">
<script>
// 三个事件的执行顺序是:keydown -> keypress -> keyup
// 键盘事件对象中的keyCode属性可以得到相应的ASCII码值,可以用来判断用户按下了哪个键
// keydown 和 keyup 不区分大小写,keypress区分大小写
// 1.keyup 按键弹起的时候触发
document.addEventListener('keyup', function (e) {
console.log('keyup弹起来了,值为:' + e.keyCode);
});
// 2.keydown 按键按下的时候触发 能识别功能键 比如 ctrl shift等
document.addEventListener('keydown', function (e) {
console.log('keydown按下了,值为:' + e.keyCode);
});
// 3.keypress 按键按下的时候触发 不能识别功能键
document.addEventListener('keypress', function (e) {
console.log('keypress也按下了,值为' + e.keyCode);
})
// 4.模拟京东按键输入
// 核心思路:检测用户是否按下了s键,如果按下s键,就把光标定位到搜索框里面
// 使用键盘使劲按对象里面的keyCode判断用户是否按下s键
// 搜索框获得焦点:使用js里面的focus()方法
var search = document.querySelector('input');
document.addEventListener('keyup', function (e) {
// console.log(e.keyCode); 先测试下找到s键的ASCII码等于83
if (e.keyCode === 83) {
search.focus();
}
})
</script>
</body>
键盘事件对象
最新推荐文章于 2024-08-23 20:55:13 发布
![](https://img-home.csdnimg.cn/images/20240711042549.png)