Open In App
Related Articles

Ways to capture the backspace and delete on the onkeydown event

Improve
Improve
Improve
Like Article
Like
Save Article
Save
Report issue
Report

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.

These are the following methods:

Approach 1: Using event.key property

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

Example 1: This example implements the above approach.

html

<!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>
        let up = document.getElementById('GFG_UP');
        let down = document.getElementById('GFG_DOWN');
        let 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:

backspace

Output

Approach 2: Using event.keyCode Property

  • 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.

html

<!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>
        let up = document.getElementById('GFG_UP');
        let down = document.getElementById('GFG_DOWN');
        let 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:

backspace

output


Whether you're preparing for your first job interview or aiming to upskill in this ever-evolving tech landscape, GeeksforGeeks Courses are your key to success. We provide top-quality content at affordable prices, all geared towards accelerating your growth in a time-bound manner. Join the millions we've already empowered, and we're here to do the same for you. Don't miss out - check it out now!


Last Updated : 22 Dec, 2023
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads
Complete Tutorials