修改颜色时不会触发 HTML5 input type=color onChange 事件答案

【问题标题】：HTML5 input type=color onChange event does not fire when the color is modified修改颜色时不会触发 HTML5 input type=color onChange 事件
【发布时间】：2019-09-04 18:04:47
【问题描述】：

HTML5 input type=color 。问题是当我附加 onchange 事件时，它只在修改和保存颜色时触发，而不是在修改时触发。

我正在寻找一个在我实时更改颜色时触发的事件，而不是在我关闭颜色选择器并保存它时触发的事件。

const triggerme = (id) => {
  document.getElementById('result').innerHTML = document.getElementById(id).value;
}

<input type="color" id="clrPicker" onchange="triggerme(this.id)">
<p id="result"></p>

【问题讨论】：

1) 与 jquery 无关。 2）使用input事件
在 chrome 中对我来说很好用
保存颜色选择器后即可使用。我希望它在我改变颜色时触发。
您的要求是基于浏览器内部的，不太一致。使用像eyecon.ro/colorpicker这样的插件。
在使用任何插件之前，如果可能的话，我想尝试在本机 javascript 或 jquery 中执行此操作。在功能方面，我认为用户可能希望在保存之前查看所选颜色的应用是公平的。所以我认为应该有一个可用的事件在保存之前触发

标签： javascript html

【解决方案1】：

对于实时预览，使用 oninput 事件。

你可以看看这个例子：

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

【讨论】：