jscolor.js 改变动态输入答案

【问题标题】：jscolor.js change on dynamic inputjscolor.js 改变动态输入
【发布时间】：2020-08-20 10:24:11
【问题描述】：

情况

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

问题

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

在这次更新之后我不得不改变一些东西，新版本使用data-jscolor="" 而不是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="">

【问题讨论】：

标签： jquery jscolor

【解决方案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="">

【讨论】：