Javascript 颜色选择器更新输入值
好吧,我花了一整天的时间在这上面,我错过了一些东西,就是想不出来。我正在使用这个简单的颜色选择器 我试图做的是更新背景颜色,然后是字体颜色,让用户看到实时结果,并在文本输入框中自动更新十六进制颜色代码。下面是我的代码Javascript 颜色选择器更新输入值,javascript,jquery,html,forms,color-picker,Javascript,Jquery,Html,Forms,Color Picker,好吧,我花了一整天的时间在这上面,我错过了一些东西,就是想不出来。我正在使用这个简单的颜色选择器 我试图做的是更新背景颜色,然后是字体颜色,让用户看到实时结果,并在文本输入框中自动更新十六进制颜色代码。下面是我的代码 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transit
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Color Picker</title>
<link href="plugin.css" rel="stylesheet" type="text/css" />
<script src="plugin.js" type="text/JavaScript"></script>
</head>
<body>
<div id="plugin" onmousedown="HSVslide('drag','plugin',event)" style="TOP: 140px; LEFT: 430px; Z-INDEX: 20;">
<div id="plugHEX" onmousedown="stop=0; setTimeout('stop=1',100);">F1FFCC</div><div id="plugCLOSE" onmousedown="toggle('plugin')">X</div><br>
<div id="SV" onmousedown="HSVslide('SVslide','plugin',event)" title="Saturation + Value">
<div id="SVslide" style="TOP: -4px; LEFT: -4px;"><br /></div>
</div>
<form id="H" onmousedown="HSVslide('Hslide','plugin',event)" title="Hue">
<div id="Hslide" style="TOP: -7px; LEFT: -8px;"><br /></div>
<div id="Hmodel"></div>
</form>
</div>
<table>
<tr>
<td class="formlabel" align="right" valign="top">
<!-- color box to show background color and font color -->
<div id="currentcolor" style="margin-top:2px;padding:4px 10px 4px 10px;background-color:F1FFCC"><span id="showfontcolor" style="color:">Current Text Color</span></div>
<!-- End color box --></td>
<td valign="top"><table>
<tbody>
<tr>
<td><div class="small">Background Color</div>
<input name="colorcode" id="colorcode" value="" maxlength="199" class="textbox" style="width:80px" type="text">
<a href="javascript:toggle('plugin','colorcode');">Color Picker</a></td>
<td> </td>
<td><div class="small">Text Color</div>
<input name="fontcolor" id="fontcolor" value="" maxlength="199" class="textbox" style="width:80px" type="text">
<a href="javascript:toggle('plugin','fontcolor');">Color Picker</a></td>
</tr>
</tbody>
</table></td>
</tr>
</table>
<script type="text/javascript">
//*** CUSTOMIZE mkcolor() function below to perform the desired action when the color picker is being dragged/ used
//*** Parameter "v" contains the latest color being selected
function mkColor(v){
//** In this case, just update DIV with ID="colorbox" so its background color reflects the chosen color
$S('currentcolor').background='#'+v;
$('colorcode').value='#'+v;
}
loadSV(); updateH('F1FFCC');
toggle('plugin');
</script>
</body>
</html>
颜色选择器
F1FFCCX
当前文本颜色
背景色
文本颜色
//***自定义下面的mkcolor()函数,以便在拖动/使用颜色选择器时执行所需的操作
//***参数“v”包含所选的最新颜色
功能mkColor(v){
//**在这种情况下,只需使用ID=“colorbox”更新DIV,使其背景色反映所选的颜色
$S('currentcolor')。背景='#'+v;
$('colorcode')。值='#'+v;
}
loadSV();更新('F1FFCC');
切换(“插件”);
问题是它不会实时更新输入
colorcode
和fontcolor
。因此javascript有几个问题。下面我修复了你的代码:
function mkColor(v){
var field2update = $('#divUpdateID')[0].innerHTML;
if (field2update=='colorcode') {
$('#currentcolor').background='#'+v;
$('#colorcode').value='#'+v;
} else if (field2update=='fontcolor') {
$('#showfontcolor').color='#'+v;
$('#fontcolor').value='#'+v;
}
}
function mkColor(v){
if(type_to_update == 'colorcode' || type_to_update == ''){ //default to changing background color if one of the pickers has not been clicked on.
$S('currentcolor').background = "#"+v;
$('colorcode').value = '#'+v;
}else if(type_to_update == 'fontcolor'){
$S('currentcolor').css("color", '#'+v);
$('fontcolor').value = '#'+v;
}
loadSV();
updateH('F1FFCC');
toggle('plugin');
}
所有jquery选择器都已损坏。另外,innerHTML
是一个dom函数而不是jquery函数,因此需要在dom对象而不是jquery对象数组上使用它
下面是如何更新这些内容。您必须找出将其放在代码中的位置,因为我不太清楚它们应该放在哪里:
$("#currentcolor").html("The value it needs to be updated with!");
$("#colorcode").value = "Same as above!";
上面更新了背景,下面将更新您的fontcolor
:
$("#fontcolor").value = "The value you want!";
$("#currentcolor").css("color", "your text color value here!"); //this line updates the color of the text in the `currentcolor` div;
编辑:
这是对上述代码的重写,也是对您使用的插件的更改:
更改插件:
var type_to_update = ''; //this goes in the global namespace,
...
function toggle(v, type){ //changed to accept which input should be updated
$S(v).display=($S(v).display=='none'?'block':'none');
type_to_update = type; //updating the global variable
}
更改代码:
function mkColor(v){
var field2update = $('#divUpdateID')[0].innerHTML;
if (field2update=='colorcode') {
$('#currentcolor').background='#'+v;
$('#colorcode').value='#'+v;
} else if (field2update=='fontcolor') {
$('#showfontcolor').color='#'+v;
$('#fontcolor').value='#'+v;
}
}
function mkColor(v){
if(type_to_update == 'colorcode' || type_to_update == ''){ //default to changing background color if one of the pickers has not been clicked on.
$S('currentcolor').background = "#"+v;
$('colorcode').value = '#'+v;
}else if(type_to_update == 'fontcolor'){
$S('currentcolor').css("color", '#'+v);
$('fontcolor').value = '#'+v;
}
loadSV();
updateH('F1FFCC');
toggle('plugin');
}
什么不起作用?你的问题是什么?我需要它来更新颜色十六进制值,这很有帮助,我有一个工作,但我如何为每个不同的选择器?下面是@smitty再次更新的实时示例,展示了如何更新
currentcolor
div中文本的颜色。仍然无法获取它,伙计……我的脑子乱七八糟。我把你的例子放在live-link上,看起来它只使用s-single,但是一旦我放入if语句,它就不工作了,我更新了上面的代码,我现在使用的是just-s-single和no-if语句。