jscolor.js 动态输入变化

Question

情况

我正在为我的项目使用 jscolor 颜色选择器。我使用 ajax 调用加载输入字段颜色。当我将值插入输入字段时，我触发 document.getElementById('ktxt').jscolor.importColor(); 以更新颜色选择器值。

问题

我已经更新到最新的 jscolor.js 版本（2.3.3，发布日期 11/08/2020）。

这次更新后我不得不改变一些东西，新版本使用 data-jscolor="" 而不是 class jscolor。我进行了所有必要的更改，但在动态加载我的输入字段值后我无法更新 jscolor 框。

我已经在下面的例子中列出了我已经尝试过的东西。我也在那里找不到答案 documentation

function loadColor() {
  $("#ktxt").val('FF1212');
  $("#kbg").val('26FF35');
  jscolor.trigger('input change')
  //document.getElementById('ktxt').jscolor.trigger('input change');
  //document.getElementById('ktxt').jscolor.fromString('26FF35')
  //document.getElementById('ktxt').jscolor.importColor();
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jscolor/2.3.3/jscolor.min.js"></script>

<button onclick="loadColor()">Load Preset Colors</button>

<input type="text" id="ktxt" data-jscolor="" class="form-control" name="ctxt" value="">
<input type="text" id="kbg" data-jscolor="" class="form-control" name="cbg" value="">

Answer 1

根据文档，您可以使用 fromString，如下所示。您将需要选择器对象，因此请使用 $('#ktxt')[0].jscolor.

下面试试吧。

function loadColor() {
  $('#ktxt')[0].jscolor.fromString('#FF1212');
  $('#kbg')[0].jscolor.fromString('#26FF35');
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jscolor/2.3.3/jscolor.min.js"></script>

<button onclick="loadColor()">Load Preset Colors</button>

<input type="text" id="ktxt" data-jscolor="" class="form-control" name="ctxt" value="">
<input type="text" id="kbg" data-jscolor="" class="form-control" name="cbg" value="">

jscolor.js 动态输入变化

jscolor.js change on dynamic input

jquery

jscolor