javascript - 将键盘按键事件从 html5 文本框转发到游戏 Canvas

Question

如何将移动浏览器需要发送到文本框的所有键盘按键转发到我的游戏 Canvas 中？

我必须在我的游戏下方添加这种输入框，以便输入框触发手机屏幕上的键盘，并且游戏在iPhone中可以正常运行，但在Android中则不行。当然，游戏可以使用物理键盘。

<input value="click here" style="font-size: 22px;" autocorrect="off" autofocus type='text' id='foo'><div onclick='$("#foo").focus();'>click here</div>

Answer 1

由于显然不可能转发原始事件，因此我的方法是创建自己的事件并将其分派(dispatch)到 Canvas 。隐藏用户正在点击 <input> 的事实我在顶部放置了一个按钮并使其忽略指针事件。我还必须始终在文本字段中保留一个字符，以防止 Android 键盘返回大写字母。

const canvas = document.querySelector("#app canvas");
const link = document.querySelector("#app a");
const input = document.querySelector("#app input");
const output = document.querySelector("#app pre");

canvas.addEventListener("keydown", e => {
  // console.log("key:", e.key);
  output.textContent += e.key;
});

input.addEventListener("focus", function() {
  setTimeout(() => {
    link.style.display = "none";
    input.value = "a";
  }, 0);
});

input.addEventListener("keyup", function(e) {
  const key = this.value[1];
  const keyCode = key && key.charCodeAt(0);
  const ev = new KeyboardEvent("keydown", {
    key,
    keyCode
  });
  canvas.dispatchEvent(ev);
  setTimeout(() => {
    input.value = "a";
  }, 0);
});

body {
  font-family: sans-serif;
  text-align: center;
}

canvas {
  display: block;
  box-shadow: 0 0 5px 0 black;
  width: 60%;
  margin: 0 auto;
  height: 120px;
}

#app {
  position: relative;
}

#textfield {
  position: absolute;
  left: 0;
  width: 100%;
  top: 40%;
  text-align: center;
}

#textfield * {
  width: 70px;
  height: 40px;
  position: absolute;
  margin-left: -35px;
}

#textfield a {
  color: white;
  border-radius: 5px;
  background-color: red;
  box-sizing: border-box;
  padding: 0.5em;
  pointer-events: none;
  z-index: 1;
}

#textfield input {
  cursor: pointer;
  width: 70px;
  opacity: 0;
}

<div id="app">
  <canvas></canvas>
  <p id="textfield">
    <a href="">Play</a>
    <input />
  </p>
  Canvas keydown listener output:
  <pre></pre>
</div>