Question

中的颜色选择器

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

感谢

Answer 1

For some reason jscolor.init() did not work for me, and looking at the code I called

jscolor.installByClassName("jscolor");

function.

So...

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

Hope it helps

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

从2020年开始，应通过动态创建输入元素然后调用new jscolor(input)来解决原始问题。使用JQuery（也可以使用普通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]);

然后一切似乎都按预期工作。希望这可以像我一样帮助访问此答案页面的其他人。

Answer 5

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

通过调用管理使其工作 jscolor.install();

PS: jscolor v2.4.5

在动态输入上使用jscolor.js

5 个答案: