Question

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

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

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

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

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

我真的不确定如何实现这一目标。

我已经尝试过其他堆栈交换问题，但没有一个真正满足我的要求，所以如果有人能告诉我如何实现这一点，我真的很感激。

Answer 1

纯javascript解决方案：

//听取附加到颜色输入的“更改事件”

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

}

更改画布颜色检查here

Answer 2

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

要实现这一点，您需要将处理程序附加到onchange的{{1}}事件：

colorpicker

<强>演示：

这是一个有效的演示。

＆＃13;

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

＆＃13;

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

＆＃13;

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的新值？

3 个答案: