Ways to capture the backspace and delete on the onkeydown event

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.



filter_none

edit
close

play_arrow

link
brightness_4
code

<!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>

chevron_right


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.

filter_none

edit
close

play_arrow

link
brightness_4
code

<!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>

chevron_right


Output:

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


My Personal Notes arrow_drop_up

Check out this Author's contributed articles.

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.