CODEWITHSUNDEEP
jquerycssformshtmldom
user429620
user429620

Reputation:

How to know if HTML5 input type color is available as a color picker?

I'd like to add a jquery color picker fallback if no color picker is shown. For example, chrome shows a color picker, but as of yet, safari simply shows a textfield. Is there any way (without user agents) to detect if a color picker is available?

Edit: Modernizr is no good, since it would just say that safari supports it too. Safari supports input type color because it doesn't allow anything but a #hex color to be entered in the input box. But there is no color picker. I need to know if there is a color picker instead.

Upvotes: 13

Views: 5541

Answers (5)

Sora2455
Sora2455

Reputation: 844

Colour inputs with a colour well can't have their non-existent text selected - therefore they have no selectionStart or selectionEnd properties.

I find this a more useful check than the Modernizr check, which only checks that the control can't contain something other than a hex code.

Tested in Safari 12, Chrome 69, Firefox 62, Internet Explorer 11 and Edge 17.

EDIT: This method doesn't pick up Safari 12.1's support of the color picker. Any suggested fixes would be welcome.

var supportsColor = true;

try {
  var a = document.createElement("input");
  a.type = "color";
  supportsColor = a.type === "color" && typeof a.selectionStart !== "number";
} catch (e) {
  supportsColor = false;
}

document.getElementsByTagName("output")[0].innerText = supportsColor.toString();
Supports color input with color picker: <output></output>

<input type="color"/>

Upvotes: 1

mrbinky3000
mrbinky3000

Reputation: 4301

Here you go.

/**
 * Determine if the current browser has support for HTML5 input type of color.
 * @author Matthew Toledo
 * @return {boolean} True if color input type supported. False if not.
 */
var test = function() {
  var colorInput;

  // NOTE:
  //
  // If the browser is capable of displaying a color picker, it will sanitize the color value first. So "!"" becomes #000000;
  //
  // Taken directly from modernizr:
  // @see http://modernizr.com/docs/#features-html5
  //
  // These types can enable native datepickers, colorpickers, URL validation, and so on.
  // If a browser doesn’t support a given type, it will be rendered as a text field. Modernizr
  // cannot detect that date inputs create a datepicker, the color input create a colorpicker,
  // and so on—it will detect that the input values are sanitized based on the spec. In the
  // case of WebKit, we have received confirmation that sanitization will not be added without
  // the UI widgets being in place.
  colorInput = $('<input type="color" value="!" />')[0];
  return colorInput.type === 'color' && colorInput.value !== '!';
};

$(function(){
  if (test()) {
    $('body').append('<p1>Your browser supports the color input</p>');
  } else {
    $('body').append('<p>Your browser Doesn\'t Support the color input</p>');
  }
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>

Upvotes: 5

christian wuensche
christian wuensche

Reputation: 1043

Again without jQuery

const hasColorInputSupport = (document) => {
    try {
        const input = document.createElement('input');
        input.type = 'color';
        input.value = '!';
        return input.type === 'color' && input.value !== '!';
    } catch (e) {
        return false;
    };
};

Upvotes: 4

Neha Sharma
Neha Sharma

Reputation: 772

To check the support of any feature of HTML3 or CSS3 on any browser you can use modernizr.

The code for the colorpicker will be:

if(!Modernizr.inputtypes.color){
  // your fall back goes here
}

For modernizr all you have to do is to add a link of the modernizr on your web page.

Running demo for the same you can check at nettuts:

http://net.tutsplus.com/tutorials/html-css-techniques/how-to-build-cross-browser-html5-forms/

Hope this will help you.

Thanks, NS

Upvotes: 3

deiga
deiga

Reputation: 1637

You can detect HMTL5 features using Modernizr.js and add fallbacks too.

Here is a short introduction on using Modernizr.

http://html5doctor.com/using-modernizr-to-detect-html5-features-and-provide-fallbacks/

Upvotes: 1

Related Questions