我正在使用fabric js库来自定义文本。颜色选择器在所有浏览器中都运行良好,但它在safari中不起作用。
var canvas = new fabric.Canvas('canvas');
$('#fill').change(function(){
var obj = canvas.getActiveObject();
if(obj){
obj.setFill($(this).val());
}
canvas.renderAll();
});
$('#font').change(function(){
var obj = canvas.getActiveObject();
if(obj){
obj.setFontFamily($(this).val());
}
canvas.renderAll();
});
function addText() {
var oText = new fabric.IText('Tap and Type', {
left: 100,
top: 100 ,
});
canvas.add(oText);
canvas.setActiveObject(oText);
$('#fill, #font').trigger('change');
oText.bringToFront();
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://rawgit.com/kangax/fabric.js/master/dist/fabric.min.js"></script>
<input type="color" value="blue" id="fill" />
<select id="font">
<option>arial</option>
<option>tahoma</option>
<option>times new roman</option>
</select>
<button onclick="addText()">Add Custom Text</button>
<br />
<canvas id="canvas" width="750" height="550" style="border:1px solid #444"></canvas>
但是这个颜色选择器在mac(Safari浏览器)中不起作用。我不知道是什么问题。我想为safari broswer实施颜色选择器。
答案 0 :(得分:7)
如此报道:
http://caniuse.com/#feat=input-color
safari 9.1不支持输入类型颜色 js中有很好的库,可以让你快速轻松地获得一个漂亮的输入颜色小部件。
答案 1 :(得分:0)
我在产品的其他位置使用了Spectrum颜色选择器。但是,如果失败了,我只是想在页面上的某个地方使用非交互式颜色框(在这种情况下,在表格列表中)
所以我的元素只需要显示一种颜色,并且是只读的即可。
我想出了一些CSS替代方法来给我一个简单的颜色框。隐藏下拉菜单,删除填充等。
input[type=color] + div.sp-disabled {margin: 0; padding: 0; border: 0;}
input[type=color] + div.sp-disabled .sp-preview {margin: 0; width:14px; height: 14px; border: 1px solid #999; }
input[type=color] + div.sp-disabled .sp-dd {display: none; }
加载页面内容时,我将使用jQuery在这些元素上执行Spectrum,如下所示
$("input[type=color]:disabled").spectrum();