While creating a user-friendly web page or a site, there can be a requirement to refrain the user from pressing a particular key while filling out a form or a questionnaire. For instance, restricting the user to edit or undo the already entered data. In such scenarios, capturing a backspace on a keydown event is helpful on the developer’s end.
This article will elaborate the approaches to capture a backspace on the keydown event in JavaScript.
How to Capture a Backspace on the keydown Event in a Specific Element?
The “addEventListener()” method associates an event with an element, and the keycode property refers to a code that signifies a keypress. These approaches can be utilized to attach an event to the fetched input field and notify the user as soon as the particular key is pressed in it (input field).
Syntax
In the above syntax:
-
- “event” corresponds to the event that needs to be attached.
- “function” parameter corresponds to the function that needs to be executed when the event is triggered.
- “userCapture” is an optional parameter.
Example
Let’s go through the below-stated code-snippet:
<h3>Detect the Backspace Key</h3>
<input id="userInput" type="text">
</center>
<script>
let inputElement = document.getElementById('userInput');
inputElement.addEventListener('keydown', function (event) {
if (event.keyCode == 8) {
alert('Backspace');
}
})
</script>
In the above code block:
-
- First of all, include a heading in the “<h3>” tag.
- In the next step, allocate an “input text” field having the stated “id”.
- In the JavaScript code, access the created input text field by its “id” using the “getElementById()” method.
- After that, associate the “addEventListener()” method with the fetched element(input field). In the method’s parameters, the former parameter, i.e., “keydown” signifies the event name, and the latter parameter refers to the function that needs to be invoked upon the triggered event.
- In the function definition, apply the “keycode” property with the stated code referring to the “Backspace” key in the “if” condition.
- Upon the satisfied condition, the alert with the stated message will be displayed on the Document Object Model(DOM).
Output
In the output, it can be seen that upon pressing the backspace key, the user is notified with the stated message via an alert.
How to Capture a Backspace on the keydown Event Anywhere in the Entire Document Object Model(DOM)?
In this particular example, a backspace will be captured with the help of the keycode specified in the form of a “case” within the function that needs to be executed upon the triggered event:
<script>
document.addEventListener("keydown", KeyCheck);
function keyCheck(event){
let KeyId = event.keyCode;
switch(KeyId){
case 8:
alert("Backspace");
break;
}
}
</script>
In the above lines of code:
-
- Likewise, includes the stated heading in the “<h3>” tag.
- In the JavaScript part of the code, similarly, apply the “addEventListener()” method having the attached event named “keydown” and the function name as its parameters, respectively.
- After that, define a function named “keyCheck()” having the stated parameter.
- In its definition, associate the “keyCode” property with the passed parameter so that the corresponding key code against the key becomes detected upon the triggered event.
- Lastly, apply the “switch/case” statement such that the particular keycode against the backspace key is invoked from the “case” statement, and the corresponding message will be displayed through the alert.
Output
In this output, it can be seen that the desired requirement has been achieved.
Conclusion
To capture a backspace upon the “keydown” event in JS, use the combination of the “addEventListener()” method and the “keycode” property. The former example uses these approaches to capture the particular key in a specific element. The latter example can be utilized to detect the backspace key in the entire DOM. This blog discussed the approaches to capture backspace on the keydown event in JavaScript.
