荐 JavaScript的事件系列二keydown,keypress,获取键码------JavaScript学习之路4

程序员文章站 2022-06-25 09:21:09

JavaScript的事件系列二判断热键shift，ctrl，alt，winshiftkey 当shift按下时为true，默认为falsevar v = ev || window.event;if(v.shiftKey)ctrlkey 当ctrl按下时为truevar v = ev || window.event;if(v.ctrlKey)altkey 当alt按下时为truevar v = ev || window.event;if(v.altKey)meta...

JavaScript的事件系列二

判断热键shift，ctrl，alt，win

shiftkey 当shift按下时为true，默认为false

var v = ev || window.event;
if(v.shiftKey)

ctrlkey 当ctrl按下时为true

var v = ev || window.event;
if(v.ctrlKey)

altkey 当alt按下时为true

var v = ev || window.event;
if(v.altKey)

metakey 当windows键按下时，为true mac下按下command键为true
```
var v = ev || window.event;
if(v.metaKey)
```

案例

实现一个div标签当按下ctrl标签内容为ctrl，当按下shift时，标签内容为shift，当按下alt时，标签内容为alt，当同时按下就同时显示多个，新的一次按下之前的内容清空
荐
JavaScript的事件系列二keydown,keypress,获取键码------JavaScript学习之路4

完整源码

<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <title>事件对象二</title>
    <style>
        html{
            width: 100%;
            height: 60%;
            display: flex;
            justify-content: center;
            align-items: center;
        }
        .d1{
            background-color: rgba(234, 113, 20, 0.62);
            width: 350px;
            height: 40px;
            border-radius: 12px;
            font-size: 26px;
            text-align: center;
        }
    </style>
</head>
<body>
<div class="d1" id="d"></div>
<script>
    var arr = [];//定义数组用来接收按键的内容
    var d = document.getElementById("d");
    window.onkeydown = function (ev) {
        var v = ev || window.event;
        if(v.shiftKey){
            arr.push("shift");
        }
        if(v.ctrlKey){
            arr.push("ctrl");
        }
        if(v.altKey){
            arr.push("alt");
        }
        if(v.metaKey){
            arr.push("win");
        }
        d.innerText = arr;
        arr = [];//按下结束进行清零
    }
</script>
</body>
</html>

获取键码

keydown情况下

使用keyCode 这个键盘大小写只显示大写的键码，只在keydown下支持，还显示其它非字母的键码

var v = ev || window.event;//获取事件对象
//这个键盘大小写只显示大写的键码，只在keydown下支持，还显示其它非字母的键码
var which = v.which || v.keyCode;//获取事件对象的键码属性，返回值为number

荐
JavaScript的事件系列二keydown,keypress,获取键码------JavaScript学习之路4

keypress情况下

使用charCode 区分大小写这个键盘大小写只显示大小写的键码，只在keypress下支持，只显示字母的键码

var v2 = ev2 || window.event;
//区分大小写这个键盘大小写只显示大小写的键码，只在keypress下支持，只显示字母的键码
var which = v2.which || v2.charCode;//获取字母的键码，返回值为number

荐
JavaScript的事件系列二keydown,keypress,获取键码------JavaScript学习之路4

案例

完善之前的案例，建立两个div，上面显示keydown的情况，下面显示keypress情况

荐
JavaScript的事件系列二keydown,keypress,获取键码------JavaScript学习之路4

完整源码

<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <title>事件对象二</title>
    <style>
        html{
            width: 100%;
            height: 60%;
            display: flex;
            justify-content: center;
            align-items: center;
        }
        .d1{
            background-color: rgba(234, 113, 20, 0.62);
            width: 350px;
            height: 40px;
            border-radius: 12px;
            font-size: 26px;
            text-align: center;
            margin-top: 10px;
        }
    </style>
</head>
<body>
    <div class="d1" id="d"></div>
    <div class="d1" id="d2"></div>
<script>
    var arr = [];//定义数组用来接收按键的内容
    var arr2 = [];//定义数组用来接收按键的内容
    var d = document.getElementById("d");
    var d2 = document.getElementById("d2");
    window.onkeydown = function (ev) {
        var v = ev || window.event;//获取事件对象
        //这个键盘大小写只显示大写的键码，只在keydown下支持，还显示其它非字母的键码
        var which = v.which || v.keyCode;//获取事件对象的属性
        if(v.shiftKey){
            arr.push("shift");
        }
        if(v.ctrlKey){
            arr.push("ctrl");
        }
        if(v.altKey){
            arr.push("alt");
        }
        if(v.metaKey){
            arr.push("win");
        }
        arr.push(which);
        d.innerText = arr;
        arr = [];//按下结束进行清零
    }
    window.onkeypress = function (ev2) {//keypress对shiftkey。。。无效
        var v2 = ev2 || window.event;
        //区分大小写这个键盘大小写只显示大小写的键码，只在keypress下支持，只显示字母的键码
        var which = v2.which || v2.charCode;
        if(v2.shiftKey){
            arr.push("shift");
        }
        if(v2.ctrlKey){
            arr.push("ctrl");
        }
        if(v2.altKey){
            arr.push("alt");
        }
        if(v2.metaKey){
            arr.push("win");
        }
        arr2.push(which);//把键码加入arr2数组
        d2.innerText = arr2;
        arr2 = [];//按下结束进行清零
    }
</script>
</body>
</html>

本文地址：https://blog.csdn.net/dragoned_123/article/details/107368773