How to detect virtual keyboard using JavaScript ?

25 Jan, 2021
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 the physical keyboard. It is widely used in touch screen devices.
Approach: Unfortunately, currently there is no direct way to detect if a virtual keyboard appears on the screen using JavaScript. However, there are a few indirect ways using which we can detect when a virtual keyboard appears on the device’s screen. 
Using the ‘resize’ event listener in JavaScriptIf 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 queriesIn 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 orientation of the screen using CSS “orientation: landscape” media query.
Using the ‘resize’ event listener in JavaScriptIf 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.
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 queriesIn 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 orientation of the screen using CSS “orientation: landscape” media query.
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 orientation of the screen using CSS “orientation: landscape” media query.
Example:
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 query to detect orientation change*/      @media screen and (orientation: landscape) {        h1 {          color: green;        }      }    </style>  </head>  <body>    <h1 id="text">Change orientation/screen height</h1>      <script>      const text = document.querySelector("#text");  // resize event listener to detect change in screen height      window.addEventListener("resize", (e) => {        text.innerHTML = "Virtual keyboard detected!!!";      });    </script>  </body></html>
Output:
Detection when the screen height changes
Detection when the screen orientation changes
JavaScript-Misc
Picked
JavaScript
Web Technologies
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Difference between var, let and const keywords in JavaScript
Differences between Functional Components and Class Components in React
Remove elements from a JavaScript Array
Difference Between PUT and PATCH Request
How to Open URL in New Tab using JavaScript ?
Installation of Node.js on Linux
Top 10 Projects For Beginners To Practice HTML and CSS Skills
Difference between var, let and const keywords in JavaScript
How to insert spaces/tabs in text using HTML/CSS?
How to fetch data from an API in ReactJS ?