2

Вопрос:

Имеется клавиатура с событием:

app.addEventListener('keydown', inputData)

Событие корректно работает и выводиться в область textarea, но теперь необходимо чтобы при клике мышкой на элемент клавиатуры, данные так же попадали в textarea.

HTML:

<div class = "app">
  <div class="keyboard">
    <div class="key" data-action="192">ё</div>
  </div>
</div>

P.S data-action="192" это event.keyCode клавиатуры.

Подскажите пожалуйста как это возможно сделать, если можно наглядно, желательно на чиcтом JS.

UPDATE (дополнено из комментария):

У меня имеется электронная клавиатура написанная на HTML + JS.

Один из элементов клавиатуры:

<div class="key" data-action="192">ё</div>

При клике на него мышкой необходимо чтобы значение попадало в область:

<textarea name="screen" id="area" cols="30" rows="10" placeholder="Введите данные с клавиатуры"></textarea>
<span id="id"></span>
5
  • Сделайте в виде сниппета или предоставьте в виде кода
    – Greg--
    30 сен 2020 в 16:26
  • 1
    чтобы при клике мышкой на элемент клавиатуры что это значит? как вы мышкой по клавиатуре нажимаете?
    – Greg--
    30 сен 2020 в 16:28
  • У меня имеется электронная клавиатура написанная на html+js. Вот один из элементов клавиатуры <div class="key" data-action="192">ё</div>. При клике на него мышкой необходимо чтобы значение попадало в в область <textarea name="screen" id="area" cols="30" rows="10" placeholder="Введите данные с клавиатуры"></textarea><span id="id">
    – AzetX
    30 сен 2020 в 16:36
  • так а что не получается? вам для каждой кнопки сделать addEventListener('click', ()=>dowhatyouwant)
    – Greg--
    30 сен 2020 в 16:40
  • Сделайте минимальное демо в виде снипетта, уважайте время других людей
    – Greg--
    30 сен 2020 в 16:42

1 ответ 1

1

const textarea = document.querySelector("textarea")

const handleClick = event => {
  const value = event.target.dataset.action
  // или
  // const value = event.target.textContent
  textarea.value = value
  // или
  // что бы выводить всю последовательность
  // textarea.value += ` ${value}`
}

document.querySelectorAll(".key").forEach(item => 
  item.addEventListener("click", handleClick))
.key {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  background-color: red;
  cursor: pointer; 
}
<div class="key" data-action="192">ё</div> 
<textarea name="screen" id="area" cols="30" rows="10" placeholder="Введите данные с клавиатуры"></textarea>

0

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.