Как отловить изменение в input?

Question

[moskwin68]

Имеется input

<input type='text' name='fname' id='headline-input' onkeyup="writeHeadline(this.value, 'headline')" oninput="writeHeadline(this.value, 'headline')" onchange="writeHeadline(this.value, 'headline')" placeholder="Напишите заголовок" data-emoji-picker="true">

Его изменения обрабатываются и отображаются в #headline

<div id="main">
	<div id="wrapper">
		<p id="headline" >Заголовок статьи</p>
		<p id="description">Описание статьи</p>
	</div>
</div>

Код функции:

function writeHeadline (text, id) {
	document.getElementById(id).innerHTML = text;
}

Подключил vanilla-emoji-picker-master который при присвоении input'у data-emoji-picker="true" добавляет выпадающий блок с emoji и при выборе смайла добавляет его в input, но при этом не срабатывает функция writeHeadline. Как это отловить?

Comments

[DanKud]

Вместо onkeyup= обрабатывайте событие onchange=

[moskwin68]

У меня вроде есть это в коде

<input type='text' name='fname' id='headline-input' onkeyup="writeHeadline(this.value, 'headline')" oninput="writeHeadline(this.value, 'headline')" onchange="writeHeadline(this.value, 'headline')" placeholder="Напишите заголовок" data-emoji-picker="true">

[Ragtime Kitty]

Вам достаточно отслеживать одно событие: oninput. Но и в таком виде оно работает, что в консоли?

[moskwin68]

Ragtime_Kitty, в консоли ничего не происходит по этому поводу.

Answer 1

[moskwin68]

Выяснилось, что после клика по смайлику фокус переходит на связанное поле и поэтому нужно writeHeadline выполнять ещё onfocus)

Answer 2

[Филипп Гапоненко]

onchange="writeHeadline(this.value, 'headline')

Comments

[moskwin68]

У меня, вроде, есть это в коде

<input type='text' name='fname' id='headline-input' onkeyup="writeHeadline(this.value, 'headline')" oninput="writeHeadline(this.value, 'headline')" onchange="writeHeadline(this.value, 'headline')" placeholder="Напишите заголовок" data-emoji-picker="true">

Answer 3

[leni_m]

скорее всего vanilla-emoji-picker-master отбрасывает стандартное поведение инпута с помощью event.preventDefault(); попробуйте повесить обработчики событий через js, а не через html атрибуты.