JavaScript OnKeydown

2025年4月18日 | 阅读 4 分钟

什么是 OnKeydown？

在 JavaScript 中，Onkeydown 是一个事件处理程序，当用户按下键盘上的按键时可以调用。当我们在一个用户可以输入字符的表单元素（如文本区域或文本框）中使用 Web 元素时，可以使用任何元素。

它说明了当对象在文档中处于焦点时按下按键时应该发生什么。如果我们想获取按下的按键，我们需要使用 keyCode 和 which 事件属性。

语法

让我们看看 JavaScript 中 onkeydown 事件处理程序的语法

event.code 和 event.key

事件对象的 key 属性允许我们检索字符，而其 code 属性允许我们检索物理按键代码。

现在假设我们有一个按下的按键 A，无论是否按下了 Shift 键。它将给我们两个不同的字符

小写 (a) 和大写 (A)

如果用户使用的是不同的语言，它将产生一个与 A 完全不同的字符。这将是 event.key 的值，而 event.code 将始终相同。

注意：event.code 指示被按下的具体按键。例如，大多数键盘都有两个 Shift 键，一个在左边，一个在右边。event.code 帮助我们识别出按下了哪一个。同时，event.key 负责定义按键的功能，例如它是否是 Shift 键。

通过这个，我们可以检查哪个按键被按下，我们需要在 keydown 上设置一个监听器。

一方面，如果 event.key 的值是字符，它会根据语言而变化。如果用户在操作系统中有多种语言，并且用户在它们之间切换，那么同一个按键将具有不同的字符。我们需要检查 event.code 始终保持不变。

例如

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<script>
    function myFunction(){
        alert("You pressed a key now.")
    }
</script>
<body>
    <input type="text" onkeydown="myFunction()">
</body>
</html>

输出

自动重复

当一个按键被按得足够长时，它就会开始自动重复：keydown 会一次又一次地触发，当它被释放时，我们最终得到 keyup。

我们有多个 keydown 事件和一个 keyup 事件，这是正常的。如果我们希望事件由自动重复触发，我们需要访问事件对象并检查 event.repeat 属性是否设置为 true。

默认操作

我们有不同的默认操作。这是因为键盘可能会启动各种操作，如下所述

一个字符会出现在屏幕上。
使用 delete 键删除一个字符。
可以使用 page-down 键滚动。
可以使用 Ctrl+S 打开保存页面对话框。

如果我们阻止 keydown 的默认操作，它可能会取消其中大部分，但 OS 特定的按键除外。例如，在 Windows 上，我们可以使用 Alt+F4 关闭当前浏览器窗口。在 JavaScript 中，无法通过阻止默认操作来停止它。

示例 1

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        function checkedPhoneKey(key) {
            return(key >= '0' && key <= '9') || key == '+' || key == '(' || key ==')' || key == '-';
        }
    </script>
    <input onkeydown = "return checkedPhoneKey(event.key)" placeholder = "Phone number" type="tel">
</body>
</html>

输出

示例 2

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        h1{
            text-align: center;
            color: yellowgreen;
        }
        h2 {
            text-align: center;
        }
        input [type= text]{
            width: 100%;
            padding: 14px 22px;
            margin: 7px 0;
            box-sizing: border-box;
            font-size: 22px;
            color: white;
        }
        p{
            font-size: 22px;
        }
 </style>
</head>
<body>
    <h1>Event handler</h1>
    <h2>Sample output</h2>
    <p>Press the key to change the background color</p>
    <input type="text" id="demo" onkeydown="func1()"
    onkeyup="func2()">
    <script>
        function func2(){
        document.getElementById("demo").style.backgroundColor = "red";
       
  } 
    function func1 (){
        document.getElementById("demo").style.backgroundColor = "orange";
    }
  </script>
</body>
</html>

输出

示例 3

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h1>Event Handler</h1>
    <h2>Sample output</h2>
    <input type="text" id="demo" onkeydown= "func1()">
    <script>
        function func1(){
            var keyCode = ('which' in event) ? event.which : event.keycode;
        alert("The Unicode key code is:" + keyCode);

        }
        
    </script>
    
</body>
</html>

输出

示例 4

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JavaScritp onkeydown event handler</title>
    <style>
        h1{
            text-align: center;
            color: bisque;

        }
        h2{
            text-align: center;
        }
    input[type=text] {
        width: 100%;
        padding: 14px 22px;
        margin: 7px 0;
        box-sizing: border-box;
        font-size: 22px;
        color: white;
    }
    p{
        font-size: 22px;
    }
    </style>
</head>
<body>
    <h1>Event handler</h1>
    <h2>Sample output</h2>
    <p> Press the key to change the background color and print the unicode</p>
    <input type="text" id="demo" onkeydown="func1()">
    <script>
        function func2(){
            document.getElementById("demo").style.backgroundColor = "red";
        }
        function func1() {
            var keyCode = ('which' in event) ? event.which: event.keyCode;
            alert ("The Unicode key code is:" +keyCode);
            document.getElementById("demo").style.backgroundColor = "blue";
        }
    </script>
</body>
</html>

输出

下一个主题如何在 JavaScript 中创建多行注释

JavaScript OnKeydown

什么是 OnKeydown？

语法

event.code 和 event.key

注意：event.code 指示被按下的具体按键。例如，大多数键盘都有两个 Shift 键，一个在左边，一个在右边。event.code 帮助我们识别出按下了哪一个。同时，event.key 负责定义按键的功能，例如它是否是 Shift 键。

自动重复

联系信息

关注我们

教程

面试题

在线编译器

Python

Java

.Net Framework

AI, ML and Data Science

Cloud Technology

B.Tech and MCA

Web Technology

PHP

Software Testing

Technical Interview

Java Interview

Python

Web Interview

Database Interview

B.Tech / MCA

Important Interview

Software Testing Interview

Company Interviews

Online Compilers

Multiple Choice Questions

JavaScript 基础

JS 变量和数据类型

JS 控制语句

JavaScript 函数

JavaScript 对象

JS 高级函数

JS Promises & Async/Await

JavaScript DOM

JavaScript JSON 对象

JavaScript 验证

JavaScript Cookies

异常处理

JavaScript 集合

JavaScript 事件

JavaScript OOPs

JavaScript BOM

面试题

选择题

差异

JavaScript Map 方法

JavaScript Handler

JavaScript Number 方法

JavaScript Reflect

JavaScript Symbol

Symbol 属性

JavaScript Math 方法

JavaScript Date 方法

JavaScript DataView

JavaScript Object 方法

JavaScript Set 方法

JavaScript 字符串方法

JavaScript TypedArray 方法

JavaScript WeakMap 方法

JavaScript WeakSet 方法

JavaScript 数组方法

JavaScript RegExp 对象

JavaScript 附加内容

JavaScript 杂项

JavaScript 进阶

问题

Lodash

JavaScript OnKeydown

什么是 OnKeydown？

语法

event.code 和 event.key

注意：event.code 指示被按下的具体按键。例如，大多数键盘都有两个 Shift 键，一个在左边，一个在右边。event.code 帮助我们识别出按下了哪一个。同时，event.key 负责定义按键的功能，例如它是否是 Shift 键。

自动重复

相关帖子

JavaScript 中的 IIFE 是什么？

将 JSON 转换为 JavaScript 对象

JavaScript 最新版本

JavaScript 格式化货币

数字转字符串 JavaScript

如何在 JavaScript 中获取当前 URL？

JavaScript 通知

最佳在线 JavaScript 课程

JavaScript 中的命名空间

JavaScript 严格模式

订阅 Tpoint Tech

联系信息