How to detect virtual keyboard using JavaScript ? Last Updated : 18 Apr, 2025 Comments Improve Suggest changes Like Article Like Report 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, there is no direct way to detect if a virtual keyboard appears on the screen using JavaScript. However, there are a few indirect ways to detect when a virtual keyboard appears on the device's screen. Using the 'resize' event listener in JavaScript: If a virtual keyboard appears on the screen, the height of the screen would be changed. Thus, we can listen to this event using the 'resize' event listener available in JavaScript to detect a change in the height of the screen. This event listener can directly be added to the window object.Using CSS media queries: In a few cases when a virtual keyboard pops up on the screen, the orientation of the screen gets changed from portrait to landscape. Thus, using this fact we can detect a change in the orientation of the screen using CSS "orientation: landscape" media query.Example: This example shows the above-explained approach. HTML <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> <style> @media screen and (orientation: landscape) { h1 { color: green; } } </style> </head> <body> <h1 id="text">Change orientation/screen height</h1> </body> </html> JavaScript <script> const text = document.querySelector("#text"); window.addEventListener("resize", (e) => { text.innerHTML = "Virtual keyboard detected!!!"; }); </script> Output: Detection when the screen height changesDetection when the screen orientation changes Comment More infoAdvertise with us Next Article How to detect virtual keyboard using JavaScript ? A arpit2205 Follow Improve Article Tags : JavaScript Web Technologies JavaScript-Questions Similar Reads 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 web page elements like links, sections, paragraphs, headings, and blockquotes for web applications. CSS stands for "Cascading Style 2 min read Build a Virtual Keyboard using HTML CSS & JavaScript In this article, we will build a virtual keyboard using HTML, CSS, and JavaScript. A virtual keyboard is a user interface component that allows users to input text by clicking on the keys displayed on the screen. Our keyboard will support standard alphanumeric characters, special characters, and a C 4 min read How to Create Keyboard Shortcuts in JavaScript ? This article will demonstrate how to create keyboard shortcuts in JavaScript. We can manually set user-defined functions for different shortcut keys. Keyboard shortcuts allow users to perform actions quickly by pressing a combination of keys, such as Ctrl + S for saving, Ctrl + C for copying, or cus 4 min read 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 3 min read Virtual Keyboard using React In this article, we will create Virtual Keyboard using ReactJS. This project basically implements functional components and manages the state accordingly. Users can interact with the virtual keyboard by clicking on keys, and the interface will respond accordingly, allowing for a seamless typing expe 7 min read Like