更改 <input type=color> 值 onChange

Question

美好的一天！

我试图让用户选择一种颜色，当他们选择一种颜色时，我想将值更改为他们想要的颜色。我认为这将是一个 boostrap 功能，因为它来自 bootstrap，但不幸的是，它必须手动修改和自定义。有什么方法可以在用户选择他们选择的颜色时更改值。

截至目前，我有一个 onChange=alert 来通知用户他们选择的颜色，但我想避免使用警报并在用户输入后更改值。

我希望我已尽力解释我的问题，并希望从中吸取教训！

谢谢！

<input type="color" class="form-control form-control-color" id="colorPicker" value="#000002" onchange="alert(this.value);" />

Answer 1

不要使用不安全的内联 on* 处理程序。 JS 应该只在一个地方，那就是它各自的标签或文件。使用 Element.addEventListener() 代替
创建一个函数来处理颜色变化并将逻辑放入其中
从事件中获取函数内的选定颜色currentTarget.value

// Cache your elements
const elColorPicker = document.querySelector("#colorPicker");
const elColorCode = document.querySelector("#colorCode");
const elBody = document.querySelector("body");



// Change color function
const changeColor = (evt) => {
  const selectedColor = evt.currentTarget.value;
  elColorCode.value = selectedColor;
  elBody.style.backgroundColor = selectedColor;
};

// Add the Event to your input
elColorPicker.addEventListener("input", changeColor);

<input type="color" class="form-control form-control-color" id="colorPicker" value="#000002">
<input readonly type="text" class="form-control form-control-color" id="colorCode" value="#000002">

更改 <input type=color> 值 onChange

Change <input type=color> value onChange

html

javascript

jquery

bootstrap-5