如何使用物理按键在屏幕上键入内容并模拟虚拟键盘（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中，实际上我该如何“链接”物理按键，以便我可以单击屏幕上的HTML按钮之一，也可以按实际的按键对两者进行相同的操作？

Answer 1

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