js组合键和单个键盘事件

简介: 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>
相关文章
|
JavaScript
js节点、属性操作,计时器,location、history对象,常见键盘事件
js节点、属性操作,计时器,location、history对象,常见键盘事件
|
6月前
|
JavaScript 前端开发
JS实现键盘事件(回车)的登录
JS实现键盘事件(回车)的登录
39 0
|
6月前
|
JavaScript 前端开发
js基础——事件(鼠标事件、键盘事件、表单事件......)
js基础——事件(鼠标事件、键盘事件、表单事件......)
58 0
|
JavaScript 前端开发
js的键盘事件
js的键盘事件
53 0
|
JavaScript 前端开发
JS的键盘事件
JS的键盘事件
|
JavaScript 前端开发
js常用点击、鼠标、键盘事件--详解
js常用点击、鼠标、键盘事件--详解
145 0
|
JavaScript 前端开发
|
JavaScript 程序员
【JavaScript-事件】target和this的区别?如何阻止冒泡事件?常见的鼠标事件和键盘事件有哪些?
【JavaScript-事件】target和this的区别?如何阻止冒泡事件?常见的鼠标事件和键盘事件有哪些?
160 0
【JavaScript-事件】target和this的区别?如何阻止冒泡事件?常见的鼠标事件和键盘事件有哪些?
|
JavaScript
js键盘事件中的键码对照表
JS中的键盘事件经常用到,收集了键盘事件对应的键码来分享下
js键盘事件中的键码对照表