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;
  }
}

应该发生的是，当单击颜色框中的颜色时，应触发“输入”事件侦听器，从而导致<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

在您的...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 个答案: