键盘事件——JS

_洋

于 2022-04-08 14:00:46 发布

阅读量211

点赞数

分类专栏： JavaScript 文章标签： js

本文链接：https://blog.youkuaiyun.com/mantou_riji/article/details/124039504

版权

JavaScript 专栏收录该内容

52 篇文章

订阅专栏

这篇博客介绍了JavaScript中的键盘事件处理，包括onkeydown和onkeyup事件，以及如何通过event.keyCode获取按键编码值。示例代码展示了如何监听特定按键（如Y键）以及结合Ctrl键的组合键。同时，博客还探讨了如何在onkeydown事件中阻止默认行为，例如禁止在文本框中输入数字。通过对event.keyCode的判断，可以实现特定字符输入的过滤。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

键盘事件:

onkeydown ：按键被按下
onkeyup ：按键被松开
键盘事件一般都会绑定给可以获取焦点的对象（如：输入框），或者是doument。

属性

通过event.keyCode获取按下键得编码值
altKey：判断是否按了alt

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <style>

    </style>
    <script>
        window.onload = function(){
    // 当onkeydown连续触发时，第一次和第二次之间会间隔稍微长一点，其他的会非常的快——故意设计成这样子的
        document.onkeydown =function(event){
            // 获取谁被按下了
            /*可以通过keycode来获取按键的编码通过它可以判断哪个按键被按下*/
            // alert(event.keyCode);
            if(event.keyCode===89){
                alert("y被按下了");
            }
            if(event.keyCode==89 && event.ctrlKey){
                alert("ctrl和y都被按下了");
            }

        };
        // document.onkeyup =function(){
        //     alert("按键被松开了");
        // };
        }       
    </script>
  
</head>
<body>
    <input type="text">
    
</body>
</html>

在文本框中输入内容，属于onkeydown的默认行为

如果在onkeydown中取消了默认行为(return false)，则输入的内容，不会出现在文本框中。

eg：只允许输入字母，不允许输入数字：

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <style>

    </style>
    <script>
        window.onload = function(){
        var input = document.getElementsByTagName("input")[0];
        input[0];
        input.onkeydown= function(event){
            event = event || window.event;
            if(event.keyCode >= 48 && event.keyCode <=57){
                return false;
            }
            /*
            在文本框中输入内容，属于onkeydown的默认行为
            如果在onkeydown中取消了默认行为，则输入的内容，不会出现在文本框中*/
            // return false;
        }
        }
       
    </script>
  
</head>
<body>
    <input type="text">
    
</body>
</html>