Как использовать палитру цветов HTML5 с прослушивателем событий

avatar
Harald
10 августа 2021 в 16:40
386
1
0

Я ищу способ использовать прослушиватели событий и получать каждое изменение цвета, перемещая мышь по палитре. Он работает только без прослушивателя событий, и я хотел бы знать, почему. Где моя ошибка...

Это работает, если я использую следующий код. При перемещении мыши по палитре срабатывает каждое изменение цвета.

HTML:

<input type="color" id='picker_1' oninput="getData(this.value)">

Javascript:

function getData(value){console.log(value);

Используя прослушиватель событий, я получаю значения только при открытии или закрытии средства выбора, но не при перемещении по палитре.

HTML:

<input type="color" id='picker_1'>

Javascript:

let el = document.getElementById('picker_1');
el.addEventListener('oninput', function() {  // I tried also onchange
 console.log(el.value);
});

Лучшим решением было бы использовать стандартную палитру цветов HTML5 с jQuery...

Рад за помощь. Спасибо

Источник

Ответы (1)

avatar
Keshav Bajaj
10 августа 2021 в 16:49
1

Нет события как oninput при использовании addEventListener, вы должны удалить префикс on и вместо него использовать input.

let el = document.getElementById('picker_1');
el.addEventListener('input', function() {  // I tried also onchange
 console.log(el.value);
});
<input type="color" id='picker_1'>