Sorting MongoDB Databases in Ascending Order (ASCII value) using Node.js

How to detect virtual keyboard using JavaScript ?

Last Updated : 18 Apr, 2025

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 changes

Detection when the screen orientation changes

Sorting MongoDB Databases in Ascending Order (ASCII value) using Node.js

arpit2205

Improve

Article Tags :

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

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

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

How to detect Adblocker using JavaScript ?

In this article, we will be developing an adblocker detector using JavaScript. Adblocker is an extension that is used to block the ads which are served by the website. Adblocker blocks the DOM and the script which has the code to show ads. The adblockers have massive data of blocklist file names and

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

How to find out which character key is pressed using JavaScript?

To find which key is pressed in JavaScript, use event listeners like keydown, keypress, or keyup. By accessing properties such as event.key or event.code, it becomes easy to identify the specific key pressed. This approach is useful for handling user input and triggering actions based on key events.

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

How to disable arrow key in textarea using JavaScript ?

Given an HTML element containing the <textarea> element and the task is to disable scrolling through arrow keys with the help of JavaScript. Approach 1: Add an event listener onkeydown on the window.If the event happens then check if the keys are arrow or not.If arrow key is pressed then preve

How to detect browser autofill using JavaScript?

We will learn how to detect browser autofill using javascript. Here we are going to use 3 programming languages HTML, CSS, Jquery to solve this problem in the best and well-defined way. In all web browser autofill is the feature that automatically fills the form fields such as email, address, passwo

How to detect flash is installed or not using JavaScript ?

The task is to detect whether the user has installed Adobe Flash player or not with the help of JavaScript. we're going to discuss 2 techniques. Approach: Create a ShockwaveFlash.ShockwaveFlash object.If the instance's value is true, Flash is installed.If any error occurred, Use navigator.mimetypes