我想使用 HTML5 的新输入元素，如 type="number"、type="color" 等。
Google Chrome 使用自定义用户界面处理这些问题，效果很好。
相反，Firefox 让事情变得更基本，留下了通常的type="text" 界面外观和感觉。
我想检测浏览器何时没有像 Google 那样提供额外的增强功能，因此我可以自己提供。
如何做到这一点？
【问题讨论】：
标签： javascript html forms cross-browser fallback
您可以通过创建一个并查看其类型来检测浏览器是否支持新类型；如果支持，该类型将是 HTML5 类型（number、color 等），如果不支持，则为 text：
var input = document.createElement('input');
input.setAttribute('type', 'number');
if (input.type === 'number') {
// Supported
}
else {
// Not supported
}
【讨论】：
目前 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');
【讨论】：
首先：我在 Mac 上的 FF29beta 显示了正确的数字和颜色 UI！
简短的回答是：您无法检测到用户看到了什么。您只能检查 API 并假设带有 API 的浏览器也实现了 UI。如果浏览器符合标准，那么这个假设应该是正确的。
所以最简单的测试是检查内容属性是否也被idl属性反映：
function supportsInput(type) {
var input = document.createElement('input');
input.setAttribute('type', type);
return (input.type === type);
}
Modernizr 测试做了更多的工作来为您提供更准确的结果，主要是为了排除旧的 webkit 浏览器。您可以将新的输入类型分为三类：1. 简单语义类型（即“搜索”），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;
}
【讨论】：