@doinoil
Студент

Как передать событие другому елементу?

Здраствуйте, помогите пожалуйста понять как передать все клавиатурные события нижнему елементу
<div id="handler"tabindex="0"></div>
<div id="target" contenteditable="true"></div>
<style>
#handler{
width:50%;
height:50%;
background:green;
}
#target{
width:50%;
height:50%;
background:grey;
}
</style>
<script>
document.getElementById("handler").addEventListener("keydown", (event) => {
	document.getElementById("target").dispatchEvent(event);
//чтото идет не так...
}, true);
</script>

Тоесть нажимая клавиши над не редактируемым дивом событие должно обрабатыватся на нижнем, редактируемом
  • Вопрос задан
  • 49 просмотров
Решения вопроса 1
@dimoff66
Кратко о себе: Я есть
Здесь несколько моментов

1) Вам нужно создать новый event, старый уже сдиспатчился и не может быть использован для другого элемента

document.getElementById("target").dispatchEvent(new Event('keydown', { which: event.which }));


Теперь евент будет срабатывать.

2) Если вы хотите чтобы не просто срабатывало событие, а менялся текст, вам придется временно перевести фокус на target и установить курсор в конец текста

const target = document.getElementById("target")
target.focus()
target.selectionStart = target.innerText.length
target.dispatchEvent(
      new Event('keydown', { which: event.which })

)

Но разумнее просто самому менять текст таргета, добавляя полученный символ в конец свойства innerText

target.innerText += event.key

а не генерировать событие
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы
Artezio Нижний Новгород
от 130 000 до 180 000 ₽
Artezio Москва
от 160 000 до 220 000 ₽
Artezio Витебск
от 2 800 до 3 300 $