js组合键和单个键盘事件

柔光的暖阳◎ 2023-01-23 12:59 6阅读 0赞

### 文章目录 ###

*   *  js 里面的键盘码对应的值
     *  监听单个按键
     *  监听组合键

## js 里面的键盘码对应的值 ##

内容过多，请移驾另一篇博文：  
[https://yangyongli.blog.csdn.net/article/details/118753001][https_yangyongli.blog.csdn.net_article_details_118753001]

## 监听单个按键 ##

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTUyNTI3Mg_size_16_color_FFFFFF_t_70]

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

## 监听组合键 ##

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTUyNTI3Mg_size_16_color_FFFFFF_t_70 1]

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

[https_yangyongli.blog.csdn.net_article_details_118753001]: https://yangyongli.blog.csdn.net/article/details/118753001
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTUyNTI3Mg_size_16_color_FFFFFF_t_70]: /images/20221004/4fc660eb2c8b4174be8f4a4d303d699e.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTUyNTI3Mg_size_16_color_FFFFFF_t_70 1]: /images/20221004/0e6a1fd04d4c43719b4efbf3876f6ab4.png