jscolor - 在动态输入上使用 jscolor.js

Question

我正在使用来自http://jscolor.com/的颜色选择器

我试图将它附加到一些动态输入，但无济于事。就动态输入而言，在页面加载时输入不存在，只有在用户单击某些内容后输入才可用。例如，我有一行数据，每一行都有不同的背景颜色。这行数据是使用 ajax 加载的。在每一行的末尾，有一个编辑按钮。通过单击编辑按钮，它将为单击的行显示一个输入文本框。当用户单击输入文本框时，我想调用 jscolor 选择器。我怎样才能做到这一点？

谢谢

Answer 1

由于某种原因 jscolor.init() 对我不起作用，并查看我调用的代码

jscolor.installByClassName("jscolor");

功能。

所以...

$(document).ready(function() {
  jscolor.installByClassName("jscolor");
});

希望能帮助到你

Answer 2

我也遇到了这个问题，但幸运的是它很容易解决。动态创建输入后，您需要（重新）初始化 jscolor：

jscolor.init()

Answer 3

这对我有帮助

<script>
 $(document).on('click', '#myPickerId', function () {
    var obj = $(this)[0];
    if (!obj.hasPicker) {
        var picker = new jscolor.color(obj, {});  //
        obj.hasPicker = true;
        picker.showPicker();
    }
});    
</script>

在我的例子中，选择器控件是动态的，因为它位于 Knockout.js 的“with”语句中，它在需要时隐藏并重新创建选择器。

Answer 4

动态添加输入字段时遇到同样的问题

设法通过调用使其工作 jscolor.install();

PS：jscolor v2.4.5

Answer 5

截至 2020 年，最初的问题应该可以通过动态创建输入元素，然后调用new jscolor(input). 使用 JQuery（你也可以使用 vanilla JS）：

var color_input = $('<input class="jscolor" spellcheck="false">');
new jscolor(color_input[0]);

这将使弹出选择器出现在单击时，并且一切看起来都很好。但是，您不能以编程方式对其进行操作。要使用上面的对象设置颜色，您通常会使用如下方法：color_input[0].jscolor.fromString("#B7B7B7"). 但是对于动态创建的对象，这将失败，因为color_input[0].jscolor未定义。我相信这是 Jscolor 中的一个错误（并且可能很容易解决），因为丢失的对象实际上可用于color_input[0]._jscLinkedInstance. 因此，您可以自己在实例化时设置对象：

var color_input = $('<input class="jscolor" spellcheck="false">');
color_input[0].jscolor = new jscolor(color_input[0]);

然后一切看起来都按预期工作。希望这可以帮助像我一样遇到此答案页面的其他人。