likes
comments
collection
share

JS中常用的键盘事件与keycode属性

作者站长头像
站长
· 阅读数 49

JS中的键盘事件与keycode属性

键盘事件

键盘事件与鼠标事件类似，同样常出现在开发过程中。 简单介绍三个常见的键盘事件

  • keydown (识别所有键)
  • keyup (识别所有键)
  • keypress (不识别功能键) 注意:三个事件的执行顺序 keydown -> keypress -> keyup

keydown

keydown的含义是指当按键按下的时候触发，可以识别所有键

具体使用如下所示

<body>
    <script>
         // keydown 使用方法
        document.addEventListener('keydown', function() {
                console.log('您已按下键盘');
            })
            
    </script>
</body>

运行结果如下

JS中常用的键盘事件与keycode属性

keyup

keyup的含义是指当按键松开的时候触发，可以识别所有键

具体使用如下所示

<body>
    <script>
        // keyup 使用方法
        document.addEventListener('keyup', function() {
            console.log('您已松开键盘');
        })


    </script>
</body>

运行结果如下

JS中常用的键盘事件与keycode属性

keypress

keypress的含义同样是指当按键按下的时候触发，但与keydown不同的是，keypress无法识别功能键，例如ctrl shift 左右箭头等

具体使用如下所示

<body>
    <script>


        // keypress 使用方法
        document.addEventListener('keypress', function() {
                console.log('press:您已按下键盘');
            })

    </script>
</body>

运行结果如下

JS中常用的键盘事件与keycode属性

三个键盘事件的执行顺序

利用如下代码验证三个键盘的执行顺序符合 keydown -> keypress -> keyup

代码如下

<body>
    <script>
        // 验证三个事件的执行顺序  keydown -- keypress -- keyup
        document.addEventListener('keypress', function() {
                console.log('press:您已按下键盘');
            })
        document.addEventListener('keydown', function() {
                console.log('down:您已按下键盘');
            })
            document.addEventListener('keyup', function() {
            console.log('您已松开键盘');
        })

    </script>
</body>

运行结果如下

JS中常用的键盘事件与keycode属性

keycode属性

在键盘事件对象中存在多种属性。其中为了获取键盘输入的值，一般使用key属性与keycode属性

key属性直接获取键盘的输入，但是该属性目前存在着兼容问题，因此并不常用

keycode属性获取键盘输入相对应的ASCII码值，在开发中较为常用

键盘事件对象属性展示

简单的展示一下键盘事件对象中所存在的属性。

<body>
    <script>
        document.addEventListener('keyup', function(e) {
			// 展示键盘事件对象中的属性
            console.log(e);
            })
    </script>
</body>

结果如下

其中键盘输入为a，a的ASCII码为65

JS中常用的键盘事件与keycode属性

keyCode属性的使用与注意事项

  1. 我们的keyup 和keydown事件不区分字母大小写 因此 a 和 A的keyCode得到的都是65
  2. 我们的keypress 事件 区分字母大小写 a 97 和 A 得到的是65

实验如下

<body>
    <script>

        document.addEventListener('keyup', function(e) {
            console.log('up:' + e.keyCode);
        })
        document.addEventListener('keypress', function(e) {
            console.log('press:' + e.keyCode);

        })
    </script>
</body>

运行结果如下

图中键盘输入为a 由于先运行keypress后运行keyup,因此press在前up在后 JS中常用的键盘事件与keycode属性

转载自:https://juejin.cn/post/7052985326142717960
评论
请登录