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

Posted 2023-05-09

【中文标题】如何知道 HTML5 输入类型颜色是不是可用作颜色选择器？

【英文标题】：How to know if HTML5 input type color is available as a color picker?如何知道 HTML5 输入类型颜色是否可用作颜色选择器？

【发布时间】：2012-11-27 04:05:39

【问题描述】：

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

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

【问题讨论】：

你可以使用Modernizr库。

正要这么说。你打败了我。

必须说，鉴于您在下面的评论，这是一个好问题。

确实是个好问题。我通常检查can I use，以便在决定使用与否之前查看当前市长浏览器实现了多少特性。当然，在你的情况下它并不适用。

【参考方案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>

【参考方案2】：

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

颜色选择器的代码将是：

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

【参考方案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;
    ;
;

【讨论】：

有任何理由拥有try/catch 包装器吗？我看不到任何逻辑可能引发错误的情况。 （除了 document 未定义，但这似乎与大多数用例无关）

@Retsam 这个 try-catch 语句肯定是有原因的。当您不添加它并尝试将input.type 设置为“无效”的东西（当然是在 IE11 中）时，IE11 会完全崩溃，例如"color"。只要您必须支持古老的软件，绝对要保留围绕该代码的try-catch :)

【参考方案4】：

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

这里是关于使用 Modernizr 的简短介绍。

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

【讨论】：

我检查了modernizr的来源，它只会说safari也支持它。 Safari 支持它，因为它不允许在输入框中输入除#hex 颜色之外的任何内容。但是没有颜色选择器。我需要知道是否有颜色选择器。

【参考方案5】：

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

我发现这是一个比 Modernizr 检查更有用的检查，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"/>