js判断用户按下的是键盘中哪个键，并作出相应事件

爬楼梯的小新

已于 2022-02-06 09:08:07 修改

阅读量2.4k

点赞数

分类专栏： JavaScript 文章标签： javascript 前端

于 2022-02-02 17:30:13 首次发布

本文链接：https://blog.csdn.net/weixin_57607714/article/details/122770780

版权

JavaScript 专栏收录该内容

86 篇文章 4 订阅

订阅专栏

键盘上的每个按键都有对应的编码数字如何知道自己按下的键对应的数字是什么可以console.log(e.keyCode)

案例1：点击键盘上s （意为搜索）时表单自动获取焦点

如果不知道键盘上的某个键对应的数字时可以log打印一下

<body>
    <input type="text" />
    <script>
        var ipt = document.querySelector('input');
        //keyup 键盘被松开时执行if
        document.addEventListener('keyup', function(e) {
            // console.log(e.keyCode);  判断用户输入了哪个键
            if (e.keyCode === 83) {  //按下s，e.keyCode打印出的对应数字是83
                ipt.focus();
            }
        })
    </script>
</body>

案例2: 表单内容为空时 con盒子隐藏否则盒子内容将会和表单内容同步显示有点像vue里的v-model双向绑定但这里只是将表单里的值赋值给盒子

div的内容要用innerhtml获取表单的值要用value

<body>
    <div class="con"></div>
    <input type="text" />

    <script>
        var con = document.querySelector(".con");
        var ipt = document.querySelector("input");
        ipt.addEventListener("keyup", function() {
            if (ipt.value == '') {
                con.style.display = 'none';
            } else {
                con.style.display = 'block';
                con.innerHTML = this.value;  //this指向表单
            }
        });
    </script>
</body>