CODEWITHSUNDEEP
javascripthtml
Pumpkin Pie
Pumpkin Pie

Reputation: 540

HTML5 input type=color onChange event does not fire when the color is modified

HTML5 input type=color . The issue is when I attach onchange event, it only fires when the color is modified and saved, but not when it is modified.

I'm looking for an event that fires as I change the colors real time, and not when I close the color picker and save it.

const triggerme = (id) => {
  document.getElementById('result').innerHTML = document.getElementById(id).value;
}
<input type="color" id="clrPicker" onchange="triggerme(this.id)">
<p id="result"></p>

Upvotes: 3

Views: 2765

Answers (1)

EiN
EiN

Reputation: 131

For live preview, use the oninput event.

You can check this example:

https://codeburst.io/color-switcher-ui-with-color-input-type-css-variables-d4efd8aa6f8f

Upvotes: 2

Related Questions