顏色輸入框 <input type='color'> 不適用於輸入事件

Question

在addEventListener（）中使用'input'事件時，它不能與顏色輸入框一起正常工作。

HTML是：

<input type="color" value="#ff0000" id="colorWell">
 <p>Text to be colored</p>

Javascript是：

var colorWell = document.getElementById('colorWell');
colorWell.addEventListener("input", updateFirst, false);

function updateFirst(event) {
  var p = document.querySelector("p");

  if (p) {
    p.style.color = event.target.value;
  }
}

應該發生的是，當單擊顏色框中的顏色時，應觸發“ input”事件偵聽器，從而導致<p>標記中的文本變為彩色。 這一切都應在單擊顏色框的“確定”按鈕之前發生。

這不會發生-僅在單擊“確定”按鈕后才會着色。

我正在使用Chrome。 這是Chrome問題嗎？ 如果是這樣，是否有解決方法？

Answer 1

 var colorWell = document.getElementById('colorWell'); colorWell.addEventListener("input", updateFirst, false); function updateFirst(event) { var p = document.querySelector("p"); if (p) { p.style.color = event.target.value; } }

 <input type="color" value="#ff0000" id="colorWell"> <p>Text to be colored</p>

Answer 2

在您的"input"上方（或下方）添加...addEventListener("click",... "input" 。

完整樣本如下：

 var colorWell = document.getElementById('colorWell'); colorWell.addEventListener("click", updateFirst, false); colorWell.addEventListener("input", updateFirst, false); function updateFirst(event) { var p = document.querySelector("p"); if (p) { p.style.color = event.target.value; } }

 <input type="color" value="#ff0000" id="colorWell"> <p>Text to be colored</p>

Answer 3

請看下面-

    <html>
    <body onLoad="startup()">
    <script language="javascript" >

     function startup()
     {
       colorWell = document.querySelector("#colorWell");

       colorWell.addEventListener("input", updateFirst,false); 
       colorWell.select();
    }




    function updateFirst(event)
    {
       var colorWell = document.getElementById('colorWell');
       var p = document.querySelector("p");

      if (p)
       {

          p.style.color = event.target.value;
       }
   }


   </script>
   <input type="color" value="#ff0000" id="colorWell" onSelect='alert("X")'>
   <p>Text to be colored</p>


   <input class="Randombutton" style="float: left;" type="button" value="Randomize" 
    onclick="randomImg()">

    <div id="quote">

   </div>
   </form>
   </body>
   </html>

顏色輸入框 <input type='color'> 不適用於輸入事件

問題描述

3 個解決方案

解決方案1
0 2018-12-15 03:37:10

解決方案2
0 2018-12-15 03:37:23

解決方案3
0 2018-12-15 04:37:44

顏色輸入框 <input type='color'> 不適用於輸入事件

問題描述

3 個解決方案

解決方案1 0 2018-12-15 03:37:10

解決方案2 0 2018-12-15 03:37:23

解決方案3 0 2018-12-15 04:37:44

解決方案1
0 2018-12-15 03:37:10

解決方案2
0 2018-12-15 03:37:23

解決方案3
0 2018-12-15 04:37:44