JavaScript Keyboard Events: Difference between Keydown, Keyup and Keypress Events

JavaScript Keyboard Events: Difference between Keydown, Keyup and Keypress Events


do you know the difference between the
main 3 keyboard events that is the keydown, the keyup and the keypress events? The keydown
event is triggered when you press down a key and the keyup event is triggered when you release that particular key and the keypress event is a bit
different. It will be triggered only when you press an alphabet or a number. For example, if you are pressing a tab or an arrow key, the keypress event will not be triggered. So let’s
create an HTML5 program to understand the
difference between these three events, that is when these three events will be triggered and in what order the events will be triggered. We will see alI those things. So open your favorite text editor. I’ll be using Komodo Edit, you can use
any text editor you want. then open a new HTML template. OK? Now the basic template is here. Change the title
to keyboard events. Then what we are going to do is we will
create a text box and when they user presses a key based on the events triggered, we will change the change the color of a table cell. so first we need a textbox. Enter the input input type is equal to text and id is equal to say text1. I also need a line break after this. Next
I’m going to add a table with three separate rows one for keydown second for keyup and the third for keypress event. We will have three columns one to display the name of the event, the second is to change the color of the cell that is when the keydown
event is triggered the corresponding cell’s color will be
changed and same for the keypress and keyup
events and in the third column, we will display the value entered inside the text box. So let me create a table first, with border is equal to 1 px and I want to set the width for each column. So col width is equal to 100 for the second column I want it to be 200 and for the third column let it be 100 again. Next we need to add the heading. So first let it be tr th, let the first heading be the event,
that is the name of the event for the second heading, let it be the action because we are going to
change the color and the third cell the heading be value. Next we need to have three separate columns
one for keydown, another for keyup and the third for
keypress and for the first column, we will write
the name of the event in the second column, we will now keep it
empty because we are going to change the color and also the third column will be empty
now it should be populated only when the event is triggered. So tr first td let it be keydown event, second one is empty, but we are going to set an id for this so that we can access it. Similar for the third cell also, td ID is equal to say downval because we are going to set the value of the, value inside the textbox we need to have two more rows similarly. So I’m going to copy and paste these and create the corresponding rows for keypress and keyup. Now I have created two more rows one is for keyup and the second is for keypress. Now the table is ready next we need to have this script section script type is equal to text slash javascript. Close it. and I’m going to add event listener for the 3 different events, that is keydown, keyup and keypress Le me add it inside the window dot on load. So document dot getelementbyid text1 dot addeventlistener Let the first event be keydown. Then we need to specify the function that is going to be called, let it be keyisdown and the third argument is false. Do the same for the other two events as well. Now we have the event listener for all the three events. Next we need to write the functions, keyisdown, keyisup and keyispress functions.
So function keyisdown. Then function keyisup and function keyispress. Next what we are going to do inside the keyisdown function, we have to change the color of the down cell to red and inside the keyisup function we will change the color of
the cell up and inside the keyispress function, we will change the color of the press do something else. So let’s make it something like a traffic
signal with red, yellow and green color. So inside this,
document dot getelementbyid down dot style dot background-color is equal to red. so let me to save the file. I’m going to
save it in my desktop. Let it be events. OK? Save the file and let’s see how it
works. So minimize this one, here is the file. Right click, open with Google Chrome We have the file now Enter something. Oh we are not able to see the difference. See first it became red yellow and green but again and again when we enter the key, we are not able to see the difference. So, what we should do? Once the color is changed, we will make the color in the other two cells to white so that we will be able to
see the difference that is which event is triggered on which keydown or keypress or keyup event, we will be able to differentiate For that go back and inside this keydown function, we will make the up and press cells to white. So copy this and what is the code for white? It is #FFFFFF. again for this one also copy paste and inside keyisup, we will make press and down to white no save the file, again refresh now enter things see which event is triggered first, keypress is triggered first, then followed by keydown and keyup
events. Now try to press the arrow key, you could see that only the keydown and keyup events are triggered. See keydown keyup. But if you press a number, keypress then keydown and finally keyup event
is triggered. Next we have to have values in the value column, so for that document getelementbyid downval dot innerhtml because we are setting the
value of a table cell is equal to document dot getelementbyid the text1 dot text, sorry not text, it is value We can copy and paste this here it is upval and here it is pressval. So save the file, and refresh the browser Enter a. See I’m entering arrow key, that is why you are not able to see any value in the Value box. Again I am entering 5 5, again 5, o o again arrow key, see when you press the arrow key, you are able to see only keydown and keyup events. keydown, keyup, keydown, keyup and when you press p, see you can see
keypress and keypress, keydown, keyup keypress, keydown, keyup. OK? So I think this makes the difference
between the three events clear. See you in the next tutorial. Bye.

2 thoughts to “JavaScript Keyboard Events: Difference between Keydown, Keyup and Keypress Events”

Leave a Reply

Your email address will not be published. Required fields are marked *