HTML 输入颜色选择器，与颜色选择器选择同步应用更改答案

【问题标题】：HTML Input Color Picker, Apply Changes In Sync With Color Picker SelectionHTML 输入颜色选择器，与颜色选择器选择同步应用更改
【发布时间】：2021-08-09 12:35:10
【问题描述】：

我有一个简单的设置，我使用 HTML 输入标签来获取颜色选择器。

但是我似乎无法直接获得结果，这是我使用的设置：

  function updateBackground( e ) {
    document.getElementById("button").style.backgroundColor = e.value
  }

<input id="colorpicker" type="color" value="#2b439d" onchange="updateBackground( this )">

<button id="button" style="font-size:24px; color:rgba(0,0,0,0)">space space space space</button>

无论我尝试什么，无论是onchange、mouseup 还是mousemove，我都无法获得与颜色选择器选择同步的值。我的意思是button-元素只有在我点击离开颜色选择器模式时才会改变它的背景颜色。

我希望按钮的更新与用户在颜色选择器模式中所做的更改同步。基本上与颜色选择器预览具有相同的效果，它也会与用户在颜色选择器模式中所做的更改同步更新。

如何让颜色选择器的结果与用户的选择同步？

【问题讨论】：

标签： javascript html

【解决方案1】：

您可以使用 oninput 属性。

<input id="colorpicker" type="color" value="#2b439d" oninput="updateBackground( this )">

<button id="button" style="font-size:24px; color:rgba(0,0,0,0)">space space space space</button>

<script>
  function updateBackground( e ) {
    document.getElementById("button").style.backgroundColor = e.value
  }
</script>

【讨论】：