我使用Spectrum JS作为不支持< input type =“color>”的浏览器的回退.为此,只需包含Spectrum JS库,并且所有内容都会自动完成.
http://bgrins.github.io/spectrum/#modes-input
一个工作实例：
http://jsfiddle.net/ctkY3/5542/
您应该看到默认颜色输入框,除非使用IE. (是的,即使IE11不支持颜色输入,MS只支持Edge中的颜色输入)
问题是,一旦使用$(element).spectrum()函数,它将显示所有浏览器的频谱选择器,而我只想使用它作为后备.那么,如何添加选项到后备颜色选择器？
解决方法
在调用jQuery对象的频谱之前,应该检查dom是否准备就绪,并且浏览器还支持彩色输入.
正如this answer所示,当不支持输入时,它将默认为文本.
所以,假设你有一个id选择器的输入,你可以尝试以下：
$(document).ready(function() {
var i,colorInputSupported;
i = document.createElement("input");
i.setAttribute("type","color");
colorInputSupported = i.type !== "text";
if(!colorInputSupported){
$("#picker").spectrum({
// Here you put the options
color: "#f00"
});
}
});
这是这个代码的working example.
作为替代,频谱支持通过数据属性来设置HTML元素本身中选择器的选项.例如：
<input type='color' id="picker" data-color="#f00"/>
将生成以红色开始的颜色选择器,仅在不支持默认颜色选择器的浏览器中显示.
这是一个working example.有关选项的完整列表,您可以在spectrums docs中查看
