CODEWITHSUNDEEP
javascriptjqueryhtml
Varun Sharma
Varun Sharma

Reputation: 4842

Color picker is not working in safari browser

I am using fabric js library for custom text. Color picker is working fine in all browser but it is not working in 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>

But this color picker is not working in mac (Safari browser). I don't know what is issue. I want to implement color picker to safari broswer.

Upvotes: 10

Views: 12510

Answers (2)

AndreaBogazzi
AndreaBogazzi

Reputation: 14731

as reported here:

http://caniuse.com/#feat=input-color

The input type color is not supported on safari 9.1 There are nice libraries in js that allow you to have quickly and easy a nice input color widget.

One of those is: http://jscolor.com/

Upvotes: 8

Mike Irving
Mike Irving

Reputation: 1628

I'm using the Spectrum color picker elsewhere in my product.. but where this was failing, I simply wanted a non-interactive box of color somewhere on the page (in this case, in a tabular list)

So my elements just needed to show a color, and be readonly.

I have come up with some CSS overrides to give me just a simple box of color. Hiding the dropdown, removing padding etc.

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; }

When my page content loads, I execute Spectrum on these elements, with jQuery, as below

$("input[type=color]:disabled").spectrum();

Upvotes: 0

Related Questions