Skip to content
Related Articles
Open in App
Not now

Related Articles

How to detect virtual keyboard using JavaScript ?

Improve Article
Save Article
  • Last Updated : 10 Jan, 2023
Improve Article
Save Article

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


My Personal Notes arrow_drop_up
Related Articles

Start Your Coding Journey Now!