How To Detect Key Presses In JavaScript

In this tutorial, you'll learn how to detect key presses in JavaScript by listening for Keyboard events.

If you want to setup shortcuts for your app with JavaScript or you just need to listen for user input with JavaScript then you can setup a special event listener for keyboard events.

When the user triggers the keydown event in JavaScript (by simply entering data into their keyboard) then you an listen for this by setting up an event listener on the window object.

There are other keyboard events in JavaScript that you can listen to but keydown is suitable for our example.

You'll see in this JavaScript tutorial for beginners that you can easily determine what key the user pressed and then take action depending on what data is provided in the keyboard event. An example might be to setup a hotkey so that your JavaScript app has the ability to trigger some functions when the user enters that particular key.

We'll finish up the tutorial by running through a quick example where we create a 'Save' hot key that triggers an alert to the user when they press the combination of CTRL + S on their keyboard. Channel Handle @codebubb

[themike]

omg, your a life saver. I have been looking for this for a long time. Great work, keep it up

[arpitghura]

Thank you. I am searching for this tutorial. My problem got resolved

[chaitanyahazarika]

You are the best, I have seen 2-3 videos but their code did not work .Thank you

[coffeeisthepathtovictory]

Thank you very much, this was the third YouTube tutorial and 7th source that I have tried. Thank you.

[NishantCosmos]

thank you so much, it helps me a lot for making custom shortcuts for my regular website surfing

[doober.]

does this work if you close the tab with code

[captainyaptin]

how would you get the string that had been typed out prior to pressing the enter key? thank you!

[Lilies]

The code doesn’t work in a text editor but does in a console for me

[jackdo]

Do you know how to detect when a key is hold for x seconds?

[baaszunnaiyyer]

hello sir I am having an issue, when I use keypress, keydown or keyup on EventLisner I get multiple event output on a single keystroke, could you please hep me with this problem.