[JavaScript] 常用的键盘事件

常用的键盘事件

事件除了使用鼠标触发,还可以使用键盘触发
我们主要学习以下三个键盘事件:
在这里插入图片描述
这里举一下onkeyup的示例,当我们按键弹起的时候事件触发:

document.addEventListener('keyup', function() {
    console.log('弹起');
 })

在这里插入图片描述
只要我按键弹起一次,控制台就会输出一次。

键盘事件对象

在这里插入图片描述
注意: onkeydown和onkeyup 不区分字母大小写,onkeypress区分字母大小写。在我们实际开发中,我们更多的使用keydown和keyup,它能识别所有的键(包括功能键)keypress不识别功能键,但是keyCode属性能区分大小写,返回不同的ASCIl值

小示例:当我们按下Esc键时,弹出游戏开始对话框(我们可以通过keyCode先求出Esc ASC||码值)

document.addEventListener('keydown',function(e){
            if(e.keyCode==27)
            {
                alert("游戏开始");
            }
            else{
                alert("按Esc键开始游戏");
            }
 })

实现效果:
当我们没有按下Esc时:
在这里插入图片描述
当我们按下Esc时:
在这里插入图片描述

示例练习:模拟京东按键输入内容

请添加图片描述
这是京东的搜索框,当我们没有鼠标没有点击搜索框时,搜索框不会获得焦点,但是当我们按下s键,搜索框便可以自动获得焦点,大家可以去京东试试这个小功能,那我们如何实现它呢?

核心思路:检测用户是否按下了s键,如果按下s 键,就把光标定位到搜索框里面
使用键盘事件对象里面的keyCode判断用户按下的是否是s键
搜索框获得焦点:使用js里面的 focus()方法

var search = document.querySelector('input');
document.addEventListener('keyup', function(e) {
    if (e.keyCode === 83) {
        search.focus();
    }
})
  • 1
    点赞
  • 7
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 1
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

YinJie…

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值