Вывод данных при клике

Question

Всем привет! У меня имеется электронная клавиатура, написанная на js+HTML.Принажатии на физической клавиатуре событие keydown корректно обрабатывает и выводит данные в textarea. Но я не понимаю как сделать так, чтобы при клике мышкой на клавиатуру данные попадали в textarea. При этом события работали так же как при клике на клавиатуре. К примеру, срабатывал Backspace

 area.addEventListener('keydown', getDataKeyPress)
 

 function getDataKeyPress(event){
 //some code
}

  document.addEventListener('click', handleClick)//события клика по кнопке
  function handleClick(event){
    event.stopPropagation()
    const action = event.target.dataset.action //Получаю keyCode
   
    }

<textarea name="screen" id="area" cols="30" rows="10" placeholder="Введите данные с клавиатуры" autofocus></textarea>

<div class="keyboard">
            <div class='line'>
                <div class="key" data-action="192">ё</div> <!--data-action это keyCode на клавиатуре --> 
                <div class="key data-action = "49"">1</div>
                <div class="key data-action="50">2</div>
                <div class="key data-action="51">3</div>
                <div class="key data-action="52">4</div>
              </div>
 </div>

Answer 1

Думаю как-то так

function handleClick(event){
    const action = event.target.dataset.action //Получаю keyCode   
    area.value += String.fromCharCode(action);
}
    
let keys = document.getElementsByClassName("key");
  [...keys].forEach(item => item.addEventListener('click', handleClick)
)

<textarea name="screen" id="area" cols="30" rows="10" placeholder="Введите данные с клавиатуры" autofocus></textarea>

<div class="keyboard">
            <div class='line'>
                <div class="key" data-action="192">ё</div> <!--data-action это keyCode на клавиатуре --> 
                <div class="key" data-action="49">1</div>
                <div class="key" data-action="50">2</div>
                <div class="key" data-action="51">3</div>
                <div class="key" data-action="52">4</div>
              </div>
 </div>

БЛОГ НА HUSL

Вывод данных при клике

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