Skip to content
Related Articles

Related Articles

Ways to capture the backspace and delete on the onkeydown event
  • Difficulty Level : Easy
  • Last Updated : 23 Jan, 2020
GeeksforGeeks - Summer Carnival Banner

Given the HTML document. The task is to detect when the backspace and delete keys are pressed on keydown events. Here 2 approaches are discussed, one uses event.key and another uses event.keyCode with the help of JavaScript.

Approach 1:

  • Take the input from input element and add a event listener to the input element using el.addEventListener() method on onkeydown event.
  • Use event.key inside the anonymous function called in the addeventlistener method to get the key pressed.
  • Check if the key pressed is Backspace or Delete.

Example 1: This example implements the above approach.




<!DOCTYPE HTML>
<html>
  
<head>
    <title>
        Capture the backspace and delete on the onkeydown event.
    </title>
    <script src=
    </script>
</head>
  
<body style="text-align:center;">
    <h1 style="color:green;">  
            GeeksForGeeks  
        </h1>
    <p id="GFG_UP">
    </p>
    Type Here:
    <input id="inp" />
    <br>
    <p id="GFG_DOWN" style="color: green;">
    </p>
    <script>
        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!');
            }
        });
    </script>
</body>
  
</html>

Output:

  • Before clicking on the button:



  • After clicking on the button:

Approach 2:

  • Take the input from input element and add a event listener to the input element using el.addEventListener() method on onkeydown event.
  • Use event.keyCode inside the anonymous function called in the addeventlistener method to get the key pressed.
  • Check if the key’s code matches with the key code of Backspace or Delete button.

Example 2: This example implements the above approach.




<!DOCTYPE HTML>
<html>
  
<head>
    <title>
        Capture the backspace and delete on the onkeydown event.
    </title>
    <script src=
    </script>
</head>
  
<body style="text-align:center;">
    <h1 style="color:green;">  
            GeeksForGeeks  
        </h1>
    <p id="GFG_UP">
    </p>
    Type Here:
    <input id="inp" />
    <br>
    <p id="GFG_DOWN" style="color: green;">
    </p>
    <script>
        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!');
            }
        });
    </script>
</body>
  
</html>

Output:

  • Before clicking on the button:
  • After clicking on the button:

full-stack-img

My Personal Notes arrow_drop_up
Recommended Articles
Page :