JavaScript 键盘事件

最新推荐文章于 2023-05-03 21:45:30 发布

原创最新推荐文章于 2023-05-03 21:45:30 发布 · 352 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#js #javascript

本文深入解析了键盘事件的工作原理，包括onkeyup、onkeydown和onkeypress的触发条件及使用场景，探讨了它们之间的区别，以及如何利用keyCode属性进行键位识别。

键盘事件

键盘事件	触发条件
onkeyup	某个键盘按键被松开时触发
onkeydown	某个键盘按键被按下时触发
onkeypress	某个键盘按键时被按下时触发但是它不自动识别功能键，比如 ctrl shift 箭头等

注意：

如果使用 addEventListener 不需要加 on
onkeypress 和前面两个的区别是，它不自动识别功能键，比如左右箭头，shift 等。
三个事件的执行顺序是：keydown – keypress – keyup

键盘事件对象

键盘事件对象属性	说明
keyCode	返回该键的 ASCII 值

注意：

onkeydown 和 onkeyup 不区分字母大小写，onkeypress 区分字母大小写
在实际中，用到更多的是 keydown 和 keyup，它能识别所有的键(包括功能键)
keypress 不识别功能键，但是keyCode 属性区分大小写，返回不同的 ASCII 值

使用keyCode属性判断用户按下哪个键

	<script>
        // 键盘事件对象中的keyCode属性可以得到相应键的ASCII码值
        document.addEventListener('keyup', function(e) {
            console.log('up:' + e.keyCode);
            // 我们可以利用keycode返回的ASCII码值来判断用户按下了那个键
            if (e.keyCode === 65) {
                alert('您按下的a键');
            } else {
                alert('您没有按下a键')
            }
        })
        document.addEventListener('keypress', function(e) {
            // console.log(e);
            console.log('press:' + e.keyCode);
        })
    </script>

案例：模拟京东按键输入内容

当我们按下 s 键，光标就定位到搜索框，（文本框获得焦点）。

注意：触发获得焦点，可以使用 focus()


	<input type="text">
    <script>
        // 获取输入框
        var search = document.querySelector('input');
		// 给document注册keyup事件
        document.addEventListener('keyup', function(e) {
            // 判断keyCode的值
            if (e.keyCode === 83) {
                // 触发输入框的获得焦点事件
                search.focus();
            }
        })
    </script>