Question

我想使用HTML5的新输入元素，例如type="number"，type="color"等。

谷歌浏览器使用自定义用户界面处理这些问题，这些界面可以很好地完成工作。
相反，Firefox让事情变得更加基本，留下那些具有通常type="text"界面外观的人。

我想检测浏览器何时没有像谷歌那样提供额外的增强功能，以便我可以自己提供。

怎么办呢？

Answer 1

您可以通过创建一个并查看其类型来检测浏览器是否支持新类型;如果支持，则类型为HTML5类型（number，color等），如果不支持，则为text：

var input = document.createElement('input');
input.setAttribute('type', 'number');
if (input.type === 'number') {
    // Supported
}
else {
    // Not supported
}

Answer 2

目前Firefox不支持numeric inputs或color inputs，但它将在下一个主要版本中支持。要检测是否支持，请使用：

function supportsInput(type) {
  var input = document.createElement('input');
  input.setAttribute('type', type);
  if (input.type === type) {
    return true;
  } else {
    return false;
  }
}

console.log(supportsInput('color') ? 'true' : 'false');
console.log(supportsInput('number') ? 'true' : 'false');

Answer 3

首先：Mac上的MY FF29beta显示了数字和颜色的正确用户界面！

简短回答是：您无法检测到用户看到的内容。您只能检查API并假设具有API的浏览器也已实现了UI。如果浏览器符合标准，那么这个假设应该是正确的。

因此，最简单的测试是检查内容属性是否也由idl属性反映：

function supportsInput(type) {
  var input = document.createElement('input');
  input.setAttribute('type', type);
  return (input.type === type);
}

Modernizr测试可以为您提供更准确的结果，主要是为了排除旧的webkit浏览器。您可以将新输入类型拆分为三类：1。简单的sematnic类型（即“搜索”），2。有些类型带有一些特殊的验证约束（即type =“email”）和3.有类型的特殊UI （和验证约束），但也使用增强值清理算法。

这意味着您可以通过执行以下操作来增强检测功能：

var constrainTypes = {email: 1, url: 1};
var widgetTypes = {date: 1, month: 1, range: 1, color: 1, week: 1, number: 1};
function supportsInput(type) {
    var input = document.createElement('input');
    var ret = false;
    var val = '!#';
    input.setAttribute('type', type);
    if (input.type === type) {
        input.value = val;
        if (constrainTypes[type]) {
            ret = input.checkValidity && !input.checkValidity();
        } else if (widgetTypes[type]) {
            ret = input.value != val;
        } else {
            ret = true;
        }
    }
    return ret;
}

如何知道浏览器是否具有HTML5表单元素的特定表示？

3 个答案: