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:
