在重置表单的ajax post后初始化jscolor
在ajax文章将表单元素重新设置为默认值之后，如何运行jscolor？
当单击“还原默认”按钮时，下面的ajax成功地发布到in页面iframe，并将页面表单值恢复为默认。问题是，带有jscolor的输入不会将它们的背景色更改回它们的默认值。
我所做的研究让我相信，我需要用jscolor.init()重新启动jscolor；在ajax文章之后，但我无法让它开始工作。我还尝试在ajax之外构建一个函数(该函数重置表单值，然后是jscolor.init();)，并将其绑定到onclick的“还原默认”按钮，但这不起作用。
如何让jscolor在ajax文章之后再次运行？
Javascript：
<script type="text/javascript">
$(document).ready(function() {
$('#restore_form').click(function() {
$.ajax({
data: $('#build_form').serialize(),
type: $('#build_form').attr('method'),
url: $('#build_form').attr('action')+'?type=restore',
success: function(response) {
$('#preview').contents().find('html').html(response);
$('#build_form')[0].reset();
jscolor.init();
}
});
return false;
});
});
</script>HTML：
<iframe id="preview" src="preview.php" width="100%" height="120"></iframe>
<form id="build_form" class="build_form" action="preview.php" method="post">
<input type="text" name="background_color" value="#0CA0E2" class="color {adjust:false,hash:true}" />
<input id="restore_form" name="restore" type="submit" value="Restore Default" class="button" />
<input id="save_form" name="submit" type="submit" value="Save Changes" class="button" />
</form>回答 4
Stack Overflow用户
发布于 2012-07-25 04:33:13
试着重置颜色。看到您的标记，我认为您的默认颜色是0CA0E2。我是科雷特吗？如果是这样的话，您只需要(如果使用jscolor构造函数并将新对象分配给myJsColorVar var)：
myJsColorVar.color.fromString("0CA0E2"); // instead of jscolor.init()在文档中，它用于：
document.getElementById("myColorInput").color.fromString("0CA0E2");我认为最后一个示例更适合您，因为我看到您没有在JS中创建jscolor，而是应用了"color类“。
您只需要为颜色输入配置一个id：
<form id="build_form" class="build_form" action="preview.php" method="post">
<input id="myColorInput" type="text" name="background_color" value="#0CA0E2" class="color {adjust:false,hash:true}" />
<input id="restore_form" name="restore" type="submit" value="Restore Default" class="button" />
<input id="save_form" name="submit" type="submit" value="Save Changes" class="button" />
</form>看看这里：http://jscolor.com/try.php#setting-color
编辑：我创建了一个定制的jscolor。
<html>
<head>
<title>jscolor demo</title>
</head>
<body>
<script type="text/javascript" src="jscolor.js"></script>
<script type="text/javascript">
function CustomJSColor( applyIn, defaultColor, opts ) {
this.jscolor = new jscolor.color( document.getElementById( applyIn ), opts );
this.defaultColor = defaultColor;
this.jscolor.fromString( this.defaultColor );
this.reset = function() {
this.jscolor.fromString( this.defaultColor );
};
}
</script>
<body>
<input id="myField">
<script>
// the input with id "myField" will be the color picker
// 0099cc is the default color
// {} is the other options
var myPicker = new CustomJSColor( "myField", "0099cc", {} );
// to reset the color you just need to call reset
myPicker.reset();
</script>
</body>
</html>我试图从jscolor.color继承，但它似乎不是一个构造函数，所以我创建了这个类，其中包含一个jscolor。要重置组件的颜色，只需调用reset方法即可。注意，因为仅仅使用"color“类不会创建CustomJSColor。您需要以编程方式创建它。
Stack Overflow用户
发布于 2012-12-09 02:24:27
我知道这是一篇老文章，但我也遇到了同样的问题，并找到了一个更简单的解决方案，假设表单元素是带有类“color”的jscolor输入。
$('.color').each(function() {
$(this).focus();
});
$('#someotherinput').focus();获取焦点将触发jscolor，并适当设置单元格、背景和文本颜色。
Stack Overflow用户
发布于 2017-02-01 10:38:52
我发现这是个很好的解决办法。在设置值(JavaScript)之后，我调用这个函数：
document.getElementById('<your_id>').jscolor.importColor();然后显示新的颜色。
https://stackoverflow.com/questions/11642723
复制相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号