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>