JSFiddle - React, Tailwind, and code Playground

by Sergei Sokolov

HTML

<div></div>
<i>Q</i><i>n</i><i>A</i>

CSS

div {
  width: 90vw;
  height: 4em;
  border: 1px solid #CCC;
  margin: 1em 0;
}
i {
  display: inline-block;
  width: 1.2em;
  height: 1.2em;
  border: 1px solid #CCC;
  text-align: center;
  font-style: normal;
  cursor: pointer;
  margin: 0 0.1em;
}
i:active {
  background-color:#EEE;
}

JavaScript

/**
 * для вопроса https://qna.habr.com/q/975803
 * Как сделать, чтобы при клике на буквы виртуальной клавиатуры, на виртуальном мониторе появлялись эти буквы?
 */
const display = document.querySelector('div');

const keyClick = (e) => display.textContent += e.target.textContent;

document.querySelectorAll('i')
  .forEach((key) => key.addEventListener('click', keyClick));