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:
