键盘事件对象

最新推荐文章于 2024-08-23 20:55:13 发布

weixin_43520992

最新推荐文章于 2024-08-23 20:55:13 发布

阅读量225

点赞数

文章标签： javascript 前端 js

本文链接：https://blog.csdn.net/weixin_43520992/article/details/123885218

版权

这篇博客详细介绍了键盘事件的顺序，包括keydown、keypress和keyup，并展示了如何通过监听keyup事件来实现模拟京东搜索功能。当用户按下's'键时，焦点会自动切换到搜索框中，方便快捷搜索。

摘要由CSDN通过智能技术生成

<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>

weixin_43520992

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
键盘事件对象

<body> <input type="text"> <script> // 三个事件的执行顺序是：keydown -> keypress -> keyup // 键盘事件对象中的keyCode属性可以得到相应的ASCII码值,可以用来判断用户按下了哪个键 // keydown 和 keyup 不区分大小写，keypress区分大小写 // 1.keyup 按键弹起的时候触发
复制链接

扫一扫