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

前端之家收集整理的这篇文章主要介绍了jquery – 如何知道HTML5输入类型颜色是否可用作颜色选择器?前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
如果没有显示颜色选择器,我想添加一个 jquery颜色选择器回退.例如,chrome显示一个颜色选择器,但到目前为止,safari只显示一个文本框.有没有任何方式(没有用户代理)来检测颜色选择器是否可用?

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

解决方法

干得好.
/**
 * Determine if the current browser has support for HTML5 input type of color.
 * @author Matthew Toledo
 * @return {boolean} True if color input type suppored. 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>

猜你在找的jQuery相关文章