Skip to content

Courses
Tutorials
Practice
Contests

JS Tutorial
JS Exercise
JS Interview Questions
JS Array
JS String
JS Object
JS Operator
JS Date
JS Error
JS Projects
JS Set
JS Map
JS RegExp
JS Math
JS Number
JS Boolean
JS Examples
JS Free JS Course
JS A to Z Guide
JS Formatter

How to detect virtual keyboard using JavaScript ?

How to Detect Keypress using JavaScript ?

Last Updated : 18 Apr, 2025

Comments

Improve

Suggest changes

Like Article

Like

Report

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 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: In this example, we will create a program to detect keypresses using JavaScript.

keypresses

HTML

<!DOCTYPE html> <html> <head>     <style>         body {             font-family: monospace, arial;             font-size: 38px;             text-align: center;         }     </style> </head> <body>     <div id="demo"></div>     <script>         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!");                 }             };         };     </script> </body> </html>

Here,

var space_bar = 32

and

var right_arrow = 39

are actually the key codes that correspond 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.

How to detect virtual keyboard using JavaScript ?

P

polokghosh53

Improve

Article Tags :

JavaScript
Web Technologies
JavaScript-Questions

Similar Reads

How to detect virtual keyboard using JavaScript ?

This article, we are given an HTML document, the task is to detect a virtual keyboard if it pops up on the device's screen. A virtual keyboard is a tool that helps in the input of characters without the use of a physical keyboard. It is widely used in touchscreen devices. Approach: Unfortunately, th

How to detect touch screen device using JavaScript?

Sometimes you might be looking for some features to include into your web-app that should only be available to devices with a touch screen. You may need this detection while introducing newer smarter controls for touch screen users in the game app or a GPS and navigation application. While there are

How to disable arrow key in textarea using JavaScript ?

Given an HTML element containing the <textarea> element and the task is to disable scrolling through arrow keys with the help of JavaScript. Approach 1: Add an event listener onkeydown on the window.If the event happens then check if the keys are arrow or not.If arrow key is pressed then preve

How to detect browser autofill using JavaScript?

We will learn how to detect browser autofill using javascript. Here we are going to use 3 programming languages HTML, CSS, Jquery to solve this problem in the best and well-defined way. In all web browser autofill is the feature that automatically fills the form fields such as email, address, passwo

JavaScript Detecting the pressed arrow key

Sometimes we need to detect the keys and sometimes even detect which keys were pressed. To detect which arrow key is pressed we can use JavaScript onkeydown event. Detecting the pressed arrow key using onkeydown EventThe DOM onkeydown EventÂ in HTML occurs when a key is pressed by the user. Syntax:ob

How to find out which Character Key is Pressed using JavaScript?

To find which key is pressed in JavaScript, use event listeners like keydown, keypress, or keyup. By accessing properties such as event.key or event.code, it becomes easy to identify the specific key pressed. This approach is useful for handling user input and triggering actions based on key events.

How to make a key fire when key is pressed using JavaScript ?

In JavaScript, holding down a key will fire the key continuously until it is released. This behavior may be used in applications such as games where a key may be expected to fire only once even after being held down. This can be achieved using two methods: Method 1: Using a flag variable to check th

How to detect the browser language preference using JavaScript ?

Detecting the language preferences of users can be very important for Websites or Web Apps to increase user interaction. In JavaScript, this task can be easily done by using the Languages property available for the navigator interface. The navigator.language and the navigator.languages property toge

How to detect when the window size is resized using JavaScript ?

Sometimes when we develop our site, we want to detect the size of the window, In this article, we are going to learn how to detect when the window size is resized using JavaScript The window resize event occurs whenever the size of the browser window gets changed. We can listen to the resize event i

How to Detect Idle Time in JavaScript ?

The idle time is the time that the user doesn't interact with a web page. This interaction can be either moving the mouse, clicking on the page, or using the keyboard. This time can be detected to execute certain events that may need to occur after a certain period of idle time. \ Method 1: Using Ja

Corporate & Communications Address:

A-143, 7th Floor, Sovereign Corporate Tower, Sector- 136, Noida, Uttar Pradesh (201305)

Registered Address:

K 061, Tower K, Gulshan Vivante Apartment, Sector 137, Noida, Gautam Buddh Nagar, Uttar Pradesh, 201305

Advertise with us

Company
About Us
Legal
Privacy Policy
In Media
Contact Us
Advertise with us
GFG Corporate Solution
Placement Training Program

Languages
Python
Java
C++
PHP
GoLang
SQL
R Language
Android Tutorial
Tutorials Archive

DSA
Data Structures
Algorithms
DSA for Beginners
Basic DSA Problems
DSA Roadmap
Top 100 DSA Interview Problems
DSA Roadmap by Sandeep Jain
All Cheat Sheets

Data Science & ML
Data Science With Python
Data Science For Beginner
Machine Learning
ML Maths
Data Visualisation
Pandas
NumPy
NLP
Deep Learning

Web Technologies
HTML
CSS
JavaScript
TypeScript
ReactJS
NextJS
Bootstrap
Web Design

Python Tutorial
Python Programming Examples
Python Projects
Python Tkinter
Python Web Scraping
OpenCV Tutorial
Python Interview Question
Django

Computer Science
Operating Systems
Computer Network
Database Management System
Software Engineering
Digital Logic Design
Engineering Maths
Software Development
Software Testing

DevOps
Git
Linux
AWS
Docker
Kubernetes
Azure
GCP
DevOps Roadmap

System Design
High Level Design
Low Level Design
UML Diagrams
Interview Guide
Design Patterns
OOAD
System Design Bootcamp
Interview Questions

Inteview Preparation
Competitive Programming
Top DS or Algo for CP
Company-Wise Recruitment Process
Company-Wise Preparation
Aptitude Preparation
Puzzles

School Subjects
Mathematics
Physics
Chemistry
Biology
Social Science
English Grammar
Commerce
World GK

GeeksforGeeks Videos
DSA
Python
Java
C++
Web Development
Data Science
CS Subjects

@GeeksforGeeks, Sanchhaya Education Private Limited, All rights reserved

We use cookies to ensure you have the best browsing experience on our website. By using our site, you acknowledge that you have read and understood our Cookie Policy & Privacy Policy

Improvement

Suggest Changes

Help us improve. Share your suggestions to enhance the article. Contribute your expertise and make a difference in the GeeksforGeeks portal.

geeksforgeeks-suggest-icon

Create Improvement

Enhance the article with your expertise. Contribute to the GeeksforGeeks community and help create better learning resources for all.

geeksforgeeks-improvement-icon

Suggest Changes

min 4 words, max Words Limit:1000

Thank You!

Your suggestions are valuable to us.

What kind of Experience do you want to share?

Interview Experiences

Admission Experiences

Career Journeys

Work Experiences

Campus Experiences

Competitive Exam Experiences