如何通过JavaScript/JQuery设置JSColor类输入框的值？

嘿，我来帮你搞定JSColor输入框的设置问题～ 不管用原生JavaScript还是jQuery，都有很直接的方法能同时更新输入框的文本值和背景颜色，下面给你详细说：

原生JavaScript写法 #

JSColor会自动给带有jscolor类的输入框绑定一个jscolor实例，我们可以直接通过DOM元素的这个属性调用API：

假设你的输入框结构是这样的：

<input type="text" class="jscolor" id="myColorInput">

你可以这么设置颜色：

// 获取目标输入框的DOM元素
const colorInput = document.getElementById('myColorInput');
// 调用JSColor实例的set方法，传入十六进制颜色值
// 这一步会同时更新输入框的文本内容和背景色
colorInput.jscolor.set('#2ecc71');

如果需要支持其他颜色格式（比如RGB），也可以直接传对应格式的字符串：

colorInput.jscolor.set('rgb(46, 204, 113)');

jQuery写法 #

用jQuery的话，需要先把jQuery对象转换成原生DOM元素，再调用JSColor的API：

单个输入框的情况 #

// 选择目标元素后，取第一个原生DOM对象，再调用set方法
$('#myColorInput')[0].jscolor.set('#e74c3c');

多个jscolor输入框批量设置 #

如果页面上有多个带jscolor类的输入框，可以用each遍历处理：

$('.jscolor').each(function() {
  // 这里的this是当前遍历到的原生DOM元素
  this.jscolor.set('#9b59b6');
});

额外小技巧 #

如果你需要手动修改输入框的文本值，再同步更新背景色，也可以这么做：

// 原生JS示例
const colorInput = document.getElementById('myColorInput');
// 修改输入框的文本值
colorInput.value = '#f39c12';
// 调用fromString方法同步更新背景色
colorInput.jscolor.fromString('#f39c12');

这样也能达到同时修改文本和背景色的效果，不过直接用set方法会更简洁高效～

内容的提问来源于stack exchange，提问作者Kosem