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.
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.
Create an index.html file for the following code.
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.
var space_bar = 32
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.
A number gets displayed when the space bar is once clicked.
When the right arrow is clicked, the page responds with a message.
- jQuery | keypress()
- AngularJS | ng-keypress Directive
- Trigger a keypress/keydown/keyup event in JS/jQuery
If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to firstname.lastname@example.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.
Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.