如何知道HTML5输入类型颜色是否可用作颜色选择器？

Question

如果没有显示颜色选择器，我想添加一个jquery颜色选择器后备。例如，chrome显示颜色选择器，但到目前为止，safari只显示一个文本字段。有没有办法（没有用户代理）检测颜色选择器是否可用？

编辑：Modernizr并不好，因为它只会说safari也支持它。 Safari支持输入类型颜色，因为它不允许在输入框中输入#hex颜色。但是没有颜色选择器。我需要知道是否有颜色选择器。

Answer 1

干得好。

/**
 * 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>

Answer 2

要在任何浏览器上检查HTML3或CSS3的任何功能的支持，您可以使用modernizr。

colorpicker的代码将是：

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

对于modernizr，您所要做的就是在您的网页上添加modernizr的链接。

您可以在nettuts上查看相同的运行演示：

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

希望这会帮助你。

谢谢，NS

Answer 3

再次没有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;
    };
};

Answer 4

您可以使用Modernizr.js检测HMTL5功能并添加回退。

以下是使用Modernizr的简短介绍。

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

Answer 5

具有颜色的颜色输入不能选择其不存在的文本 - 因此它们没有selectionStart或selectionEnd属性。

我发现这比Modernizr检查更有用，它只检查控件不能包含十六进制代码以外的其他内容。

在Safari 12，Chrome 69，Firefox 62，Internet Explorer 11和Edge 17中进行了测试。

编辑：此方法不支持Safari 12.1对颜色选择器的支持。任何建议的修复都是受欢迎的。

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"/>