DOM键盘事件

最新推荐文章于 2022-11-23 22:57:54 发布

山有魂兮

最新推荐文章于 2022-11-23 22:57:54 发布

阅读量213

点赞数 2

文章标签： DOM键盘事件 JavaScript

本文链接：https://blog.csdn.net/weixin_39844423/article/details/102638137

版权

DOM键盘事件树状图：

测试Mac电脑，Google浏览器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>键盘事件</title>
</head>
<body>
    
</body>
<script>
    document.onkeydown = function(){
        // console.log("按下了键盘")
    }
    document.onkeypress = function(){
        // console.log("按住了键盘")
    }
    document.onkeyup = function(){
        // console.log("抬起了键盘")
    }

    // 单个按键 （测试mac 的 command键）
    document.onkeydown = function(){
        if(event.keyCode == 91){        // Firefox: 224   Opera: 17    WebKit (Safari/Chrome): 91（left）  93（right）
            console.log("按键码:" + event.keyCode)                       
            console.log("按键:" + String.fromCharCode(event.keyCode))  // 只有 数字 和 字母是正确转换
        }
    }

    // 组合按键
    document.onkeyup = function(){
        // 两位组合按键
        if(event.keyCode==88 && event.ctrlKey)      //组合按键 Ctrl + X
        {
            console.log("Ctrl + x") 
        }
        if(event.keyCode==88 && event.altKey)       //组合按键 Alt + X
        {
            console.log("Alt + x") 
        }
        if(event.keyCode==88 && event.shiftKey)     //组合按键 Shift + X
        {
            console.log("Shift + x") 
        }
        // 三位组合按键
        if(event.keyCode==88 && event.shiftKey && event.ctrlKey)     //组合按键 Shift + Ctrl + X
        {
            console.log("Shift + Ctrl + X") 
        }
    }

    // 兼容性写法
    document.onkeyup = keyUp;  
    function keyUp(e) {
      e = e || event;
        var key_code = e.keyCode||e.which||e.charCode;
        var key_name = String.fromCharCode(key_code);
        console.log("按键:"+ key_name,"按键码:" + key_code)
　　 }
　　 
    // e=e||event;这句代码是为了进行浏览器事件对象获取的兼容。
    // 在FireFox或Opera中，隐藏的变量e是存在的，那么e||event返回e，如果在IE中，隐藏变量e是不存在，则返回event。
    // e.keyCode、e.which、e.charCode 是不同浏览器各自获取按键码的方法

</script>
</html>

注意事项：

使用 onkeydonw 和 onkeypress时长按会触发多次事件
使用三位组合按键时，如有定义对应的两位组合按键，它也会触发
对于 Mac 电脑上的 Command键，不同浏览器的代码不同：
Firefox: 224
Opera: 17
WebKit (Safari/Chrome): 91（left） 93（right）
IE：Mac 已不支持

附：Keycode对照表（[对照表来源]）

在这里插入图片描述

山有魂兮

关注

2
点赞
踩
2

收藏

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

DOM键盘事件树状图：测试Mac电脑，Google浏览器<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"&gt...
复制链接

扫一扫