Skip to content
Related Articles

Related Articles

How to Detect Keypress using JavaScript ?
  • Last Updated : 31 Aug, 2020
GeeksforGeeks - Summer Carnival Banner

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.




<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>

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.




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

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




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!");
       };
    };
};    

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:

  • A number gets displayed when the space bar is once clicked.

  • When the right arrow is clicked, the page responds with a message.

  • full-stack-img

    My Personal Notes arrow_drop_up
Recommended Articles
Page :