在 onkeydown 事件中捕获退格和删除的方法

给定 HTML 文档。任务是检测何时在 keydown 事件上按下退格键和删除键。这里讨论了两种方法，一种使用 event.key，另一种在 JavaScript 的帮助下使用 event.keyCode。

方法一：

• 从输入元素获取输入，并在onkeydown 事件上使用el.addEventListener() 方法将事件侦听器添加到输入元素。
• 在 addeventlistener 方法中调用的匿名函数中使用event.key来获取按键。
• 检查按下的键是退格键还是删除键。

示例 1：此示例实现了上述方法。

  

    
        Capture the backspace and delete on the onkeydown event.
    
    
    

  

      
            GeeksForGeeks  
        
    
    
    Type Here:
    
    
    
    
    
        var up = document.getElementById('GFG_UP');
        var down = document.getElementById('GFG_DOWN');
        var el = document.getElementById('inp');
        up.innerHTML = "Type in the input box to determine the pressed.";
        el.addEventListener('keydown', function(event) {
            const key = event.key;
            if (key === "Backspace" || key === "Delete") {
                $('#GFG_DOWN').html(key + ' is Pressed!');
            }
        });
    

  

输出：

• 在点击按钮之前：
  
• 点击按钮后：
  

方法二：

• 从输入元素获取输入，并在onkeydown 事件上使用el.addEventListener() 方法将事件侦听器添加到输入元素。
• 在 addeventlistener 方法中调用的匿名函数中使用event.keyCode来获取按键。
• 检查键码是否与退格键或删除键的键码匹配。

示例 2：此示例实现了上述方法。

  

    
        Capture the backspace and delete on the onkeydown event.
    
    
    

  

      
            GeeksForGeeks  
        
    
    
    Type Here:
    
    
    
    
    
        var up = document.getElementById('GFG_UP');
        var down = document.getElementById('GFG_DOWN');
        var el = document.getElementById('inp');
        up.innerHTML = "Type in the input box to determine the pressed.";
        el.addEventListener('keydown', function(event) {
            // Checking for Backspace.
            if (event.keyCode == 8) {
                $('#GFG_DOWN').html('Backspace is Pressed!');
            }
            // Checking for Delete.
            if (event.keyCode == 46) {
                $('#GFG_DOWN').html('Delete is Pressed!');
            }
        });
    

  

输出：

• 在点击按钮之前：
  
• 点击按钮后：