js组合键和单个键盘事件

399 阅读1分钟

@[TOC]

js 里面的键盘码对应的值

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

监听单个按键

在这里插入图片描述

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