blocks|key|2053645|text|由于某种原因，jscolor.init()对我来说不起作用，看看我调用的代码|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2053646|jscolor.installByClassName("jscolor")；|2053647|函数。|2053648|所以..。|2053649|$(document).ready(function()+{
++jscolor.installByClassName("jscolor");
});|code-block|syntax|javascript|2053650|希望能有所帮助|2053651|entityMap^0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|Q|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|R|8|@]|9|@]|A|$]]|$1|D|3|E|5|6|7|S|8|@]|9|@]|A|$]]|$1|F|3|G|5|6|7|T|8|@]|9|@]|A|$]]|$1|H|3|I|5|J|7|U|8|@]|9|@]|A|$K|L]]|$1|M|3|N|5|6|7|V|8|@]|9|@]|A|$]]|$1|O|3|-4|5|6|7|W|8|@]|9|@]|A|$]]]|P|$]]

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

jscolor.installByClassName("jscolor");

function.

So...

<pre><code>$(document).ready(function() {
 jscolor.installByClassName("jscolor");
});
</code></pre>

Hope it helps

blocks|key|4975666|text|我也遇到了这个问题，但幸运的是，它很容易解决。在动态创建输入之后，您需要(重新)初始化jscolor：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4975667|jscolor.init()|code-block|syntax|javascript|4975668|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

I just had this problem too but luckily it's easy to fix. You need to (re)init jscolor after you have dynamically created your inputs:

<pre><code>jscolor.init()
</code></pre>

blocks|key|2862761|text|这对我很有帮助|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2862762|<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>|code-block|syntax|javascript|2862763|在我的例子中，选择器控件是动态的，因为它在Knockout.js+'with‘语句中，该语句在需要时隐藏和重新创建选择器。|2862764|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|L|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|M|8|@]|9|@]|A|$]]|$1|I|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|J|$]]

This helped me

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

In my case, the picker control was dynamic because it is inside Knockout.js 'with' statement which hides and recreates the picker when it needs.

blocks|key|2053655|text|在动态添加输入字段时遇到了同样的问题|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2053656|通过调用jscolor.install();使其正常工作|offset|length|style|CODE|2053657|PS:+jscolor+v2.4.5|2053658|entityMap^0|0|4|I|0|0^^$0|@$1|2|3|4|5|6|7|L|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|M|8|@$D|N|E|O|F|G]]|9|@]|A|$]]|$1|H|3|I|5|6|7|P|8|@]|9|@]|A|$]]|$1|J|3|-4|5|6|7|Q|8|@]|9|@]|A|$]]]|K|$]]

Got the same problem upon adding input fields dynamically
Managed to make it work by calling
<code>jscolor.install();</code>
PS: jscolor v2.4.5

blocks|key|142167|text|到2020年，最初的问题应该可以通过动态创建输入元素，然后调用new+jscolor(input)来解决。使用JQuery+(您也可以使用vanilla+JS+)：|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|142168|var+color_input+=+$('<input+class="jscolor"+spellcheck="false">');
new+jscolor(color_input[0]);|code-block|syntax|javascript|142169|这将使弹出窗口拾取器在单击时出现，并且一切看起来都很正常。但是，您不能以编程方式操作它。要使用上面的对象设置颜色，通常使用如下方法：color_input[0].jscolor.fromString("#B7B7B7")。但对于动态创建的对象，这将失败，因为color_input[0].jscolor是未定义的。我相信这是Jscolor中的一个错误(可能很容易解决)，因为缺失的对象实际上在color_input[0]._jscLinkedInstance中是可用的。因此，您可以使用以下命令在实例化时自己设置对象：|142170|var+color_input+=+$('<input+class="jscolor"+spellcheck="false">');
color_input[0].jscolor+=+new+jscolor(color_input[0]);|142171|然后，一切看起来都像预期的那样工作。希望这能帮助像我一样遇到这个答案页面的其他人。|142172|entityMap^0|V|I|0|0|1U|18|3L|M|5G|X|0|0|0^^$0|@$1|2|3|4|5|6|7|S|8|@$9|T|A|U|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|V|8|@]|D|@]|E|$I|J]]|$1|K|3|L|5|6|7|W|8|@$9|X|A|Y|B|C]|$9|Z|A|10|B|C]|$9|11|A|12|B|C]]|D|@]|E|$]]|$1|M|3|N|5|H|7|13|8|@]|D|@]|E|$I|J]]|$1|O|3|P|5|6|7|14|8|@]|D|@]|E|$]]|$1|Q|3|-4|5|6|7|15|8|@]|D|@]|E|$]]]|R|$]]

As of 2020, the original problem should be solvable by dynamically creating an input element, and then calling <code>new jscolor(input)</code>. Using JQuery (you could use vanilla JS as well):

<pre><code>var color_input = $('&lt;input class="jscolor" spellcheck="false"&gt;');
new jscolor(color_input[0]);
</code></pre>

This will make the popup picker appear on click, and everything appears to work just fine. However, you cannot manipulate it programmatically. To set the color using the objects above, you would normally use a method like: <code>color_input[0].jscolor.fromString("#B7B7B7")</code>. But that will fail for dynamically created objects, as <code>color_input[0].jscolor</code> is undefined. I believe this is a bug in Jscolor (and probably very easily solvable), as the missing object is actually available with <code>color_input[0]._jscLinkedInstance</code>. So you can just set the object yourself on instantiation with:

<pre><code>var color_input = $('&lt;input class="jscolor" spellcheck="false"&gt;');
color_input[0].jscolor = new jscolor(color_input[0]);
</code></pre>

And then everything looks to be working as expected. Hopefully this helps someone else that comes across this answer page as I did.

i'm using color picker from <a href="http://jscolor.com/" rel="noreferrer">http://jscolor.com/</a>

i'm trying to attach it to some dynamic inputs, but to no avail. dynamic inputs in terms of, on page load the input doesn't exist, only after the user click on something the input will become available. for example, I have a rows of data, and each row has different background color. this row of data are loaded using ajax. at the end of each row, there's an edit button. by clicking the edit button, it will display an input text box for the clicked row. I want to call the jscolor picker when the user clicks on the input text box. how can I do this?

thanks

using jscolor.js on dynamic input

翻译质量差，导致语言生硬或混乱。

没有提供实际的解决方法或示例。

解答不清晰，无法理解或解决问题。

页面排版不美观，阅读体验差。

文章

问答

视频

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云智能顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

涵盖代码开发、场景应用、自动测试全流程，助你从零构建专属AI助手

一站式MCP教程库，解锁AI应用新玩法

聚焦“写作效率、视觉美观与运行性能”三方面进行全面升级，为您提供更高效、稳定的创作环境

社区富文本&Markdown编辑器全新改版上线，欢迎大家体验!

诚挚邀请您参与本次调研，分享您的真实使用感受与建议。您的反馈至关重要，感谢您的支持与参与！

社区新版编辑器体验调研

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

问在动态输入上使用jscolor.js
EN

回答 5

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问在动态输入上使用jscolor.jsEN

回答 5

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问在动态输入上使用jscolor.js
EN