我正在使用这个jQuery Colorpicker http://www.eyecon.ro/colorpicker/#about
有什么方法可以让我在点击颜色选择器时更改输入的值(*颜色代码)?
现在它只通过点击Colorpicker上的提交按钮提交颜色。
<input type="text" value="#FFFFFF">
<script type="text/javascript">
$.noConflict();
jQuery(document).ready(function ($) {
$('input').ColorPicker({
onSubmit: function(hsb, hex, rgb, el) {
$(el).val('#' + hex);
$(el).ColorPickerHide();
},
onBeforeShow: function () {
$(this).ColorPickerSetColor(this.value);
}
})
.bind('keyup', function(){
$(this).ColorPickerSetColor(this.value);
});
});
</script>
答案 0 :(得分:4)
无法找到一个好方法,但这里有一个丑陋的,但希望并非完全糟糕的做法:
jQuery(document).ready(function ($) {
var $pickerInput;
$('input').ColorPicker({
onSubmit: function(hsb, hex, rgb, el) {
$(el).val('#' + hex);
$(el).ColorPickerHide();
},
onBeforeShow: function () {
$(this).ColorPickerSetColor(this.value);
$pickerInput = $(this);
},
onHide: function(picker) {
$pickerInput.val('#' + $(picker).find('.colorpicker_hex input').val());
}
})
.bind('keyup', function(){
$(this).ColorPickerSetColor(this.value);
});
});
答案 1 :(得分:1)
这样的事情怎么样?您可以访问onChange事件中的十六进制信息并将其分配给某个隐藏元素,在这种情况下,我添加了第二个输入。然后,在onHide中,获取隐藏元素的值并将其指定给当前输入框。
<强> HTML:强>
<input id="hexVal" type="text" value="#FFFFFF">
<input id="hidden" type="text" value="#FFFFFF">
<强> JavaScript的:强>
jQuery(document).ready(function ($) {
$('#hexVal').ColorPicker({
onSubmit: function (hsb, hex, rgb, el) {
$(el).val('#' + hex);
$(el).ColorPickerHide();
},
onBeforeShow: function () {
$(this).ColorPickerSetColor(this.value);
},
onChange: function (hsb, hex, rgb) {
$('#hidden').val('#' + hex);
},
onHide: function (picker) {
$('#hexVal').val($('#hidden').val());
}
})
.bind('keyup', function () {
$(this).ColorPickerSetColor(this.value);
});
});