onchange 在被 javascript 修改时不会触发

Posted 2023-02-25

【中文标题】onchange 在被 javascript 修改时不会触发

【英文标题】：onchange doesn't fire when modified by javascript

【发布时间】：2015-04-05 23:13:31

【问题描述】：

我正在使用频谱 (https://github.com/bgrins/spectrum)，这是一个用于调色板的 jQuery 插件。 我的目标是在用户浏览不同颜色时直接将颜色应用于背景。

到目前为止，我所拥有的是：

//*****Part of a 3rd party file, which I cannot modify****
$("#picker1").spectrum(
    allowEmpty:true,
    color: "#ECC",
    showInput: true,
    preferredFormat: "hex",
); 
//***********************************


$("#picker1").on("change keyup paste", function()
    newcolor=$("#picker1").val();
    $(".menu-itempreview").css("background-color", newcolor);     
);



<ul id="menu-primary-menupreview" class="someclass">
    <li class="menu-itempreview">Home</li>
    <li class="menu-itempreview">Sample Page</li>
    <li class="menu-itempreview">Uncategorized</li>
</ul>


<input type='input' id="picker1" />

在这里拉我一把：http://jsfiddle.net/h4Lc5b6a/

问题是，颜色只有在用户点击提交按钮时才会更新。 我怎样才能做到这一点，以便在用户浏览不同颜色时动态更新背景？

似乎问题在于 onchange，当输入字段被 javascript 修改时，它不会触发。

【问题讨论】：

这里是一个例子：jsfiddle.net/ys8oL94w 那个小提琴的问题是，我必须修改第 3 方 jquery 代码，而我无法在我的实际项目中修改。

【参考方案1】：

您可以使用 move 回调 (http://bgrins.github.io/spectrum/#events-move)。 添加到您的频谱初始化：

$("#picker1").spectrum(
    //...,
    move: function(color) 
        $(".menu-itempreview").css("background-color",  color.toHexString());
    
); 

您也可以在频谱初始化后使用this：

// Alternatively, they can be added as an event listener:
$("#picker").on('move.spectrum', function(e, tinycolor)  );
$("#picker").on('show.spectrum', function(e, tinycolor)  );
$("#picker").on('hide.spectrum', function(e, tinycolor)  );
$("#picker").on('beforeShow.spectrum', function(e, tinycolor)  );