js键盘事件

最新推荐文章于 2024-04-23 09:34:00 发布

喵俺第一专栏

最新推荐文章于 2024-04-23 09:34:00 发布

阅读量3.8k

点赞数 2

分类专栏： # Html+css+js项目文章标签： javascript 开发语言 html 前端

本文链接：https://blog.csdn.net/dengfengling999/article/details/122724656

版权

Html+css+js项目专栏收录该内容

31 篇文章 2 订阅

订阅专栏

知识点：

键盘事件一般都会绑定给一些可以获取到的焦点对象，或者是document

onkeydown 某个键盘被按下如果一直按着某个键不松手，则事件会一直触发

onkeyup 某个键盘被松开

可以通过keyCode获取按键的编码，可以判断那个按键被按下

altKey、ctrlKey、shiftKey判断alt ctrl shift是否被按下

如果在onkeydown中取消默认行为写上return false；则如果输入的内容，不会出现在文本框中

当在在页面按下alt+y时，控制台会输出alt+y按下了，松开时输出按键松开了，否则按其他键，只会触动按键松开了的事件，在输入框输入0-9时，输入框不显示，控制台显示按键的编码和按键松开了，输入其他时输入框显示，控制台显示按键的编码和按键松开了

详细代码：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        window.onload = function () {
            /*
              键盘事件：
              onkeydown-按键被按下
              onkeyup 按键被松开

              键盘事件一般都会绑定给一些可以获取到的焦点对象，或者是document
            */
            //按键事件89是y
            document.onkeydown = function (event) {
                event = event || window.event;
                if (event.keyCode == 89 && event.ctrlKey) {
                    console.log("ctrl+y被按下了");
                }

            };
            //松开事件
            document.onkeyup = function () {
                console.log("按键松开了")
            };

            //获取input
            var input = document.getElementsByTagName("input")[0];
            input.onkeydown = function (event) {
                console.log(event.keyCode);
                event = event || window.event;
                //当输入0-9时不会出现在文本框中
                if (event.keyCode >= 96 && event.keyCode <= 105) {
                    //中取消默认行为写上return false；则如果输入的内容，不会出现在文本框中
                    return false;
                }

            };
        };
    </script>
</head>

<body>
    <input type="text">
</body>

</html>

测试结果：

打开控制台

按ctrl+y

按其他键

按0：

按其他键

喵俺第一专栏

关注

2
点赞
踩
2

收藏

觉得还不错? 一键收藏
打赏
0
评论
js键盘事件

知识点：键盘事件一般都会绑定给一些可以获取到的焦点对象，或者是documentonkeydown 某个键盘被按下如果一直按着某个键不松手，则事件会一直触发onkeyup 某个键盘被松开可以通过keyCode获取按键的编码，可以判断那个按键被按下altKey、ctrlKey、shiftKey判断alt ctrl shift是否被按下如果在onkeydown中取消默认行为写上return false；则如果输入的内容，不会出现在文本框中当在在页面按下alt+y时，.
复制链接

扫一扫