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

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

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