将键盘按键按下事件从html5文本框转发到游戏画布

Question

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

我不得不在游戏下面添加这种输入框，这样输入框就可以触发手机屏幕上的键盘，游戏在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

由于显然不可能转发原始事件，我的方法是创建自己的事件并将其发送到画布。为了隐藏用户点击<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>