There are 3 keyboard events keyup, keypress, and keydown. In the case of keyboard events, the event object contains certain properties and that can help us in detecting which key is pressed by the user. In our case, we are going to use the key property.
In the following example, we have one input field in which we will enter some random text. As we start typing, we will display the letters one by one on the screen. Please have a look over the code example and steps given below.
HTML & CSS
We have 3 elements in the HTML file (div, input, and h1). The div element is just a wrapper for the rest of the elements.
We have done some basic styling using CSS and added the link to our style.css stylesheet inside the head element.