js组合键和单个键盘事件

Posted 流楚丶格念

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了js组合键和单个键盘事件相关的知识,希望对你有一定的参考价值。

js 里面的键盘码对应的值

内容过多,请移驾另一篇博文:
https://yangyongli.blog.csdn.net/article/details/118753001

监听单个按键

在这里插入图片描述

<!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>
</head>

<body>
    <script type = "text/javascript" language = JavaScript charset = "UTF-8" >
        document.onkeydown=function(event) {
          var e = event || window.event || arguments.callee.caller.arguments[0];
          if (e && e.keyCode == 27) { // 按 Esc
            //要做的事情
            console.log('按下了Esc');
          }
          if (e && e.keyCode == 113) { // 按 F2
            //要做的事情
            console.log('按下了F2');
          }
          if (e && e.keyCode == 13) { // enter 键
            //要做的事情
            console.log('按下了enter');
          }
        };
     </script>

</body>

</html>

监听组合键

在这里插入图片描述

<!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>
</head>

<body>

    <script>
        //快捷键调用  
        // type:双组合键事件,可选alt、shift、 ctrl 如不是三个参数之一则为单键事件
        // keycode:键盘对应的值
        // callback:回调函数
        // dom: 给某元素添加事件,默认为document
        function callspeedykey(type, keycode, callback, dom) {
            var dom = dom == undefined ? document : document.getElementById(dom);
            console.log(dom)
            dom.onkeydown = function (event) {
                var e = event || window.event || arguments.callee.caller.arguments[0];
                if (type == 'shift') {
                    if (e && e.keyCode == keycode && e.shiftKey) {
                        callback('shift');
                    };
                } else if (type == 'alt') {
                    if (e && e.keyCode == keycode && e.altKey) {
                        callback('alt');
                    };
                } else if (type == 'ctrl') {
                    if (e && e.keyCode == keycode && e.ctrlKey) {
                        callback('ctrl');
                    };
                } else {
                    if (e && e.keyCode == keycode) {
                        callback('enter');
                    };
                };

            };
        };
        function callback(type) {
            console.log(type);
            console.log('组合键'+type+'与enter');
        };
        callspeedykey('alt', '13', callback)
    </script>
</body>

</html>

以上是关于js组合键和单个键盘事件的主要内容,如果未能解决你的问题,请参考以下文章

js 里面的键盘码对应的值

js 里面的键盘码对应的值

Atitit.android js 的键盘按键检测Back键Home键和Menu键事件

如何检测单个控制键盘事件而不是键组合?

js 键盘事件(onkeydownonkeyuponkeypress)

使用 Qt 4.6 从键盘挂钩键和组合键