Why Isn’t the Virtual Keyboard Appearing on Mobile Devices for My Keyboard Tester?

I’m a beginner working on my third or fourth project, and I’m encountering an issue with my keyboard tester application. The project is named KeyMaster, and it works perfectly fine on PC browsers for testing keyboard events. However, I am having trouble getting the virtual keyboard to appear on mobile browsers.

Here’s a brief overview of my setup:

  • Repository Link: GitHub – CASIOmax/Keyboard-Tester

  • index.html Code:

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <link rel="icon" href="favicon.png" type="image/x-icon"> 
    <title>KeyMaster</title>
</head>
<body id="Sudo-Body">
    <div class="maindiv">
    <div id="insert"> Press any Keyboard key to see the magic!</div>
    </div>
    <input type="text" id="hiddenInput" style="position: absolute; top: -100px;" />
</body>
    <script src="spirit.js"></script>
</html>

  • spirit.js Code:

    const colorGen = function() {
    const hex = '0123456789ABCDEF';
    let color = '#';
    for (let i = 0; i < 6; i++) {
      color += hex[Math.floor(Math.random() * 16)];
    }
    return color;
}

const insert = document.getElementById('insert');
const hiddenInput = document.getElementById('hiddenInput');

document.body.addEventListener('touchstart', function() {
  hiddenInput.focus();
});

window.addEventListener('keydown', function(e) {
    const rand = colorGen();
    insert.innerHTML = `
    <table style="border: 1px solid ${rand};">
    <tr>
      <th style="border: 1px solid ${rand};">key</th>
      <th style="border: 1px solid ${rand};">keyCode</th>
      <th style="border: 1px solid ${rand};">Code</th>
    </tr>
    <tr>
      <td style="border: 1px solid ${rand};">${e.key === " " ? "Space" : e.key}</td>
      <td style="border: 1px solid ${rand};">${e.keyCode}</td>
      <td style="border: 1px solid ${rand};">${e.code}</td>
    </tr>
  </table>`;
  insert.style.color = "white";
});

Issue:
The virtual keyboard does not appear on mobile browsers when the user touches the screen. I’ve included an invisible input field to trigger the keyboard, but it seems not to work as expected on mobile devices.

What I’ve Tried:

  • Ensuring the input field is focused when the screen is touched.
  • Using contenteditable as an alternative.
  • Checking for any CSS or JavaScript that might be interfering.

Any suggestions or solutions would be greatly appreciated. Thanks!