HTML | DOM 键盘事件

它指的是在键盘上按下某个键时发生的事件。

句法：

事件：按下按键时会发生以下事件-

• 按键按下
• 按键
• 上键

特性：

• ALT键：

无论是否按下 alt 键，它都会返回。

• 字符代码：

它返回键的 unicode字符。

• 代码：

它返回输入密钥的代码。

• 控制键：

无论是否按下 ctrl 键，它都会返回。

• getModifierState():

如果指定的键被激活，则返回 true。

• 正在作曲：

它返回事件是否正在编写。

• 钥匙：

它返回键值。

• 关键代码：

它返回 onkeypress 或 onkey doen 事件的 unicode字符。

• 地点：

它返回键盘上键的位置。

• 元键：

无论是否按下元键，它都会返回。

• 重复：

如果一个键被反复按住，它就会返回。

• 移位键：

无论是否按下 shift 键，它都会返回。

• 哪一个：

它返回事件类型的 unicode字符。

返回值：它返回从键盘按下给定键时发生的事件。

示例 1：显示 onkeypress 事件。

  

  
    
      Geeks for Geeks  
  
  
    Type something in the box:
  
    
  
    
        function key() {
            alert("New Key Inserted");
        }
    
  

  

输出：
按键前：

按键后：

示例 2：显示 onkeydown 事件。

  

  
    
      Geeks for Geeks 
  
  
    Type something in the box:
  
    
  
    
        function key() {
            alert("New Key Inserted");
        }
    
  

  

输出：
按键前：

按键后：

示例 3：检查按下的键是否为 Alt。

  

  
    
      Geeks for Geeks  
  
  
    Type something in the box to 
      check if Alt key is pressed or not:
  
    
  
    
  
    
        function isKeyPressed(event) {
            var x = document.getElementById("gfg");
            if (event.altKey) {
                x.innerHTML = "ALT Key Pressed";
            } else {
                x.innerHTML = "ALT Key Not Pressed";
            }
        }
    
  

  

输出：
按键前：

按键后：

示例 4：从键盘上找出按下的键。

  

  
    
      Geeks for Geeks  
  
  
    Type something in the box
      to know the entered key:
  
    
  
    
  
    
        function myFunction(event) {
            var x = event.key;
            
            document.getElementById(
              "gfg").innerHTML =
              "Entered Key is: " + x;
        }
    
  

  

输出：
按键前：

按键后：

浏览器支持：列出的浏览器支持 DOM 键盘事件-

• 谷歌浏览器
• 火狐浏览器
• 边缘
• 苹果浏览器
• 歌剧