Как при нажатии реальной клавиатуры сделать так чтобы реагировала виртуальная?

Question

Я создал клавиатуру и мне надо чтобы при нажатии на клавиши мышкой вводился символ этой клавиши и проигрывалась анимация нажатия кнопки. Подскажите как сделать? Код выглядит примерно так:

    <!DOCTYPE html>
    <html>
    <head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="css/butons.css">
    </head>
    <body leftmargin="31vh" scroll="no" topmargin="">

    <div id="button" class="animatedButton">
    <audio preload="auto" id="beep" src="file/klik.mp3"></audio>
    <button class="buttonl" >ESC</button>

    <button class="button">F1</button>
    <button class="button">F2</button>
    <button class="button">F3</button>
    <button class="buttonl">F4</button>
    </div>
    </body>
    </html>

P.S. В программировании новичок. На клавиши не смотрите я их еще менять буду

Answer 1

Ты можешь повесить на каждую кнопку свое событие, которое будет реагировать на нажатия физической клавиатуры:

button.addEventListener('keydown', (e) => {
  if (e.keyCode === 228) { // код нажатой кнопки
    // ...
  }
})

Так же можно делать проверку не по коду, а по самой клавише. Для этого укажи if (e.key === 'a'), как пример.

Есть еще куча методов, связанных с keyboardEvent. Подробнее прочитай тут.

БЛОГ НА HUSL

Как при нажатии реальной клавиатуры сделать так чтобы реагировала виртуальная?

Ответы (1 шт):