HTML Code

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>virtualKeyboard — show</title>
</head>
<body>
  <input id="field" placeholder="Focus me on mobile">
  <p>
    <button type="button" id="showBtn">Try show()</button>
    <button type="button" id="hideBtn">Try hide()</button>
  </p>
  <pre id="out"></pre>
  <script>
    var out = document.getElementById("out");
    function report(msg) {
      out.textContent = msg;
    }
    if (!("virtualKeyboard" in navigator)) {
      report("virtualKeyboard not supported");
    } else {
      var vk = navigator.virtualKeyboard;
      var hasShow = typeof vk.show === "function";
      var hasHide = typeof vk.hide === "function";
      report(
        "show: " + (hasShow ? "available" : "missing") +
        "\nhide: " + (hasHide ? "available" : "missing") +
        "\nFocus the input, then try the buttons on a supporting device."
      );
      document.getElementById("showBtn").onclick = function () {
        document.getElementById("field").focus();
        if (!hasShow) {
          report("show() not available");
          return;
        }
        try {
          vk.show();
          report("show() called");
        } catch (err) {
          report(String(err));
        }
      };
      document.getElementById("hideBtn").onclick = function () {
        if (!hasHide) {
          report("hide() not available");
          return;
        }
        try {
          vk.hide();
          report("hide() called");
        } catch (err) {
          report(String(err));
        }
      };
    }
  </script>
</body>
</html>

Lines: 0 | Characters: 0

Live Preview Auto-refresh on Run

virtualKeyboard — show / hide check (Try It)