如何使用物理按键在屏幕上输入内容并模拟虚拟键盘 (Javascript)

Question

我正在制作一个猜词游戏，它会在屏幕上显示一个 HTML 键盘，供用户键入：

<div id="qwerty" class="section">
    <div class="keyrow">
      <button>q</button><button>w</button><button>e</button><button>r</button
      <button>t</button><button>y</button><button>u</button><button>i</button> 
      <button>o</button><button>p</button>
    </div>
    <div class="keyrow">
      <button>a</button><button>s</button><button>d</button><button>f</button> 
      <button>g</button><button>h</button><button>j</button><button>k</button>
      <button>l</button>
    </div>
    <div class="keyrow">
      <button>z</button><button>x</button><button>c</button><button>v</button> 
      <button>b</button><button>n</button><button>m</button>
    </div>
</div>

在 javascript 中，我如何从本质上 "link" 按下物理按键，以便我可以单击屏幕上的 HTML 按钮之一或按下实际按键来执行相同操作两者都有什么？

Answer 1

循环按钮，分配 click 事件侦听器，然后附加到输入的值：

<div id="qwerty" class="section">
    <div class="keyrow">
      <button>q</button><button>w</button><button>e</button><button>r</button>
      <button>t</button><button>y</button><button>u</button><button>i</button> 
      <button>o</button><button>p</button>
    </div>
    <div class="keyrow">
      <button>a</button><button>s</button><button>d</button><button>f</button> 
      <button>g</button><button>h</button><button>j</button><button>k</button>
      <button>l</button>
    </div>
    <div class="keyrow">
      <button>z</button><button>x</button><button>c</button><button>v</button> 
      <button>b</button><button>n</button><button>m</button>
    </div>
</div>

<input id="input" />

var input = document.querySelector('#input')

document.querySelectorAll('#qwerty button').forEach(el => {
  el.addEventListener('click', () => {
    input.value = input.value + el.innerText
  })
})

演示：https://jsbin.com/zawavahuzo/edit?html,js,output

如何使用物理按键在屏幕上输入内容并模拟虚拟键盘 (Javascript)

How to use physical keypresses to type in something on screen and simulate a virtual keyboard (Javascript)

javascript

addeventlistener

keypress