Skip to content
Related Articles

Related Articles

How to detect virtual keyboard using JavaScript ?
  • Last Updated : 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. 

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

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

My Personal Notes arrow_drop_up
Recommended Articles
Page :