Как использовать физические нажатия клавиш для ввода чего-либо на экране и имитации виртуальной клавиатуры (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 прослушивателей событий, а затем добавляйте к значению входа:

<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