How to Detect Keypress using JavaScript ?

In this article, keyboard detection is performed using HTML and CSS.
HTML stands for “Hypertext Markup Language”. HTML language helps the developer to create and design the web page elements like links, sections, paragraphs, headings, and blockquotes for web applications.

CSS stands for “Cascading Style Sheet”. Cascading style sheets are used to design web page layouts. The styles are defined to give styles to tables, sizes, and texts.

JavaScript is a scripting programming language used on the client and server-side which makes the web pages talk and communicate with each other.
All of the above technologies are used to implement keypress detection.
Program editor applications like Atom or Sublime Text can be used to compile the programs.

Example:
Create an index.html file for the following code.

filter_none

edit
close

play_arrow

link
brightness_4
code

<html>
<head>   
     <link rel="stylesheet" type="text/css"
     href="main.css">
    <script type="text/javascript" src="main.js">
    </script>
</head>
<body>
    <div id="demo"></div>
</body>
</html>

chevron_right


For the HTML above code, we need to include main.css and main.js



CSS code: The following code is written in the main.css file.

filter_none

edit
close

play_arrow

link
brightness_4
code

body
{
    font-family: monospace, arial;
    font-size: 38px;
    text-align: center;
}

chevron_right


JavaScript code: The following code is written in the main.js file.

filter_none

edit
close

play_arrow

link
brightness_4
code

window.onload = function(){
    var demo = document.getElementById('demo');
    var value = 0;
    var space_bar = 32;
    var right_arrow = 39;
  
    window.onkeydown= function(gfg){
        if(gfg.keyCode === space_bar){
            value++;
            demo.innerHTML = value;
        };
        if(gfg.keyCode === right_arrow)
       {
           alert("Welcome to GeeksForGeeks!");
       };
    };
};    

chevron_right


Here,

var space_bar = 32 

and

var right_arrow = 39 

are actually the key codes that corresponds to the specific key. Whenever the space bar or the right arrow is clicked, the HTML will detect the type of click and respond by the number of times clicked or by a message.

Output: