Solving Mobile Keyboard and Mouse Event Issues

Published: 3/21/2026 | Author: DevScholar

Solving Mobile Keyboard and Mouse Event Issues

Mobile device browsers primarily handle touch events rather than traditional mouse and keyboard events. This creates problems for certain scenarios, such as x86 emulators running in web pages that need keyboard input, or old web pages whose drag-and-drop features didn’t account for touch events. KBDMouseJS is a polyfill library that provides a virtual ANSI keyboard and converts touch events to standard DOM mouse events.

This project is positioned for retro computing, meaning compatibility with old web pages and professional emulators. If you need to run a Windows 95 emulator on your phone or use old web pages that haven’t been adapted for mobile, this library can help solve input problems.

Using the virtual keyboard is straightforward. After importing the CSS and JS files, place a <virtual-keyboard> tag in the page. The keyboard automatically appears when an input field gains focus.

<link rel="stylesheet" href="@devscholar/kbdmouse-js/dist/kbdmouse-js.css">
<script type="module">
  import "@devscholar/kbdmouse-js";
</script>
<virtual-keyboard></virtual-keyboard>

The virtual keyboard uses Shadow DOM by default to encapsulate styles and structure, preventing conflicts with other page styles. If you need to disable Shadow DOM (for debugging or applying external styles), set the shadow="false" attribute. When disabled, external CSS may affect the keyboard appearance.

The virtual mouse functionality converts touch operations to mouse events. Its operation logic resembles a Windows Precision Touchpad: slide one finger to move the cursor, single tap with one finger sends left click, single tap with two fingers sends right click, double tap with one finger sends double click, tap once then lift and quickly tap again while holding enables drag, and slide with two fingers sends wheel events.

<script type="module">
    import { VkMouse } from "@devscholar/kbdmouse-js";

    document.addEventListener("DOMContentLoaded", function () {
        let element = document.getElementById("polyfilled-element");
        if (element) {
            let vkMouse = new VkMouse(element);
        }
    });
</script>

The VkMouse class accepts a DOM element as a parameter and enables mouse event polyfill for that element. To cancel the polyfill, call the vkMouse.detach() method. Note that this project doesn’t support HTML5 native drag-and-drop events - for that functionality, use the drag-drop-touch-js library instead.

To quickly start a new project, first create a project directory and initialize npm, then install kbdmouse-js. Create an HTML file, import CSS and JS, place the virtual keyboard tag, and initialize VkMouse for elements that need mouse events. Vite is recommended as the development server - after configuring the start script, run npm run start and open localhost:5173 in your browser to test.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
  <title>KBDMouseJS Demo</title>
  <link rel="stylesheet" href="@devscholar/kbdmouse-js/dist/kbdmouse-js.css">
</head>
<body>
  <textarea id="demo-textarea" placeholder="Type here..." rows="4" style="width: 100%;"></textarea>
  
  <virtual-keyboard></virtual-keyboard>
  
  <div id="target-area">
    <p>Draw or drag here with touch</p>
  </div>
  
  <script type="module">
    import { VkMouse } from "@devscholar/kbdmouse-js";
    
    document.addEventListener("DOMContentLoaded", function () {
      let element = document.getElementById("target-area");
      if (element) {
        let vkMouse = new VkMouse(element);
      }
    });
  </script>
</body>
</html>

During development, you can use npm run dev:expose to expose the page to the local network, allowing you to connect your computer to your phone’s hotspot and open the webpage on your phone for testing. KBDMouseJS has a fairly specific use case, primarily for emulators and old web page compatibility. If your project falls into these scenarios, this library can save you the work of implementing touch-to-mouse event conversion yourself.