How to use the KeyboardEvent to return the character code

Keywords

Definition

If you are working on interactive pages for the user dashboard for your website, it would be a corroborating addition to return the Unicode character code of the key that is triggered. In this tutorial, I will show you how to manage that in JavaScript only, using the KeyboardEvent.

KeyboardEvent objects describe a user interaction with the keyboard; each event describes a single interaction between the user and a key (or combination of a key with modifier keys) on the keyboard. The event type (keydown, keypress, or keyup) identifies what kind of keyboard activity occurred.⁽¹⁾

Code

Create an input element named text(id).

Add an event listener to the input element with the keypress property to detect whether a character is entered or not.

If there is a definable Unicode character code, change the charCode variable as the detected Unicode character code using logic statements.

Show the Unicode character code to the user.

<--------------JavaScript----------------->

document.getElementById("text").addEventListener("keypress", function(event){
var charCode = (event.charCode) ? event.charCode : "...";
document.getElementById("char").innerHTML = "Detected: " + charCode;
});

<--------------HTML----------------->

<input id="text" style="width:80%;" placeholder="Enter a character to see the Unicode..."></input>
<p id="char">...</p>



Result:

...

References

⁽¹⁾ https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent