Open In App

How to detect virtual keyboard using JavaScript ?

Improve
Improve
Like Article
Like
Save
Share
Report

In 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 the physical keyboard. It is widely used in touchscreen 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 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 query to detect orientation change*/
      @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");
  
// resize event listener to detect change in screen height
    window.addEventListener("resize", (e) => {
        text.innerHTML = "Virtual keyboard detected!!!";
      });
</script>


Output: Click here to check the Output live

Detection when the screen height changes

Detection when the screen orientation changes



Last Updated : 10 Jan, 2023
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads