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

Question

我有一个简单的设置，我使用 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元素只会改变它的背景颜色。

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

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

Answer 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>