HTML colorpicker 改变时如何获取新值？

Question

我正在开发一个网络应用程序，需要根据 colorpicker 的值更改 HTML canvas 的颜色。

我在 HTML 中有一个 colorpicker，我需要在每次更新时从中获取 value。

<input type="color" value="#ff0800" id="color">

目前，这是与我的 javascript 文件中的 colorpicker 关联的代码。

var backRGB = document.getElementById("color").value;

我真的不确定这是如何实现的。

我试过其他堆栈交换问题，但 none 确实满足我的要求，所以如果有人能告诉我如何实现，我将不胜感激。

Answer 1

纯javascript的解决方案：

//收听 "change event" 附加到您的颜色输入

document.getElementById("color").addEventListener("change", onChangeColor);

输入值更改后触发的函数：

function onChangeColor() {

   console.log(this.value); //this.value contains the hexadecimal value of your input
   //change your canvas color

}

更改canvas颜色检查here

Answer 2

您只需要在 colorpicker 值更改时更新 backRGB 变量的值。

为此，您需要将处理程序附加到 colorpicker 的 onchange 事件：

document.getElementById("color").onchange = function() {
  backRGB = this.value;
}

演示：

这是一个工作演示：

var backRGB = document.getElementById("color").value;

document.getElementById("color").onchange = function() {
  backRGB = this.value;
  console.log(backRGB);
}

<input type="color" value="#ff0800" id="color">

Answer 3

除了已经给出的答案之外，我们还可以附加 oninput 事件处理程序而不是 onchange 事件。这是我们可以监视来自用户的颜色选择器事件的另一种方式。

此事件类似于 onchange 事件。区别在于 oninput 事件在元素的值改变后立即发生，而 onchange 在元素失去焦点时发生，在内容之后已经变了。另一个区别是 onchange 事件也适用于元素。这是一个例子：

const backRGB = document.querySelector(".backRCB");
const color = document.querySelector(".color");

color.addEventListener("input",(event)=>{
   backRGB.style.backgroundColor = color.value;
   // You can also do it with the event object as event object holds the value of the current color
   //  backRGB.style.backgroundColor = event.target.value;
});

希望对很多用户有所帮助。

HTML colorpicker 改变时如何获取新值？

How can I get the new value of HTML colorpicker when it changes?

html

javascript

onchange

colors

html5-canvas