当前位置： 移动技术网 > IT编程>开发语言>JavaScript > 荐 JavaScript的事件系列二keydown,keypress,获取键码------JavaScript学习之路4

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

2020年07月17日  | 移动技术网IT编程  | 我要评论

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，当同时按下就同时显示多个，新的一次按下之前的内容清空
在这里插入图片描述

完整源码

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

在这里插入图片描述

keypress情况下

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

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

在这里插入图片描述

案例

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

在这里插入图片描述

完整源码

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

您可能感兴趣的文章:

如对本文有疑问， 点击进行留言回复！！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网