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