嘿！今天我们来聊聊怎么判断浏览器能不能识别HTML5崭新增的属性。你有可能以为这很不容简单，其实只要掌握几个较小技巧就行了。

先说个背景

以前我们都用做全部表单输入， 然后靠 JS 去模拟日期、时间段、颜色等控件。当前有了崭新的type值， 举个例子date、time、color、email等等，能够让系统自己处理一一部分工作岗位，说白了...。

如果你写错了type值， 比如写成type="text"却想用JS模拟日期选择器， 害... 那就不太良好——要么就是全靠JS，要么就直接用type="date"让系统帮忙。

老陈旧浏览器怎么办？

琢磨琢磨。 老式IE6/7/8啥子都不支持这一些崭新type，它们会把当成普通文本框来看待。规范里说：如果浏览器不认识， 就统一回退到"text"

注意：这种回退只发生在解析阶段，DOM里的属性值本身并没变，闹笑话。。

怎么检测有没有真实的得到原生控件？

思路一：读取属性值永远是你写良好的字符串，CPU你。。

• 错误！这方法不靠谱，这是因为它只告诉你属性是哪些，而不是说当前这个type能否真实正渲染成原生控件。
• 举个例子：在IE11里写, DOM里读出来仍是"date", 但实际情况是看起来跟普通文本框一样。

思路二：行为检测——看它到底能不能弹出日历或者时间段轴之类的 UI。

// 创建一个临时 input var tmp = document.createElement; tmp.type = 'date'; // 如果浏览器不认识当前这个 type， 开倒车。 它会自动改成 'text' var isDateSupported = tmp.type === 'date'; console.log; // true 或 false

这类检测已经基本过时啦！

A lot of people still use Modernizr's inputtypes test which only checks if you can set that type attribute successfully.，别怕...

• Sometime Safari on iOS before 14.5 claims support for date but only shows plain text input plus basic pattern validation.
• This means Modernizr returns true while users can't actually pick a date from a calendar.

渐进增强较大还是优先兼容？

第一步：

- 写一个默认的作为备选方案。

第二步：

- 用 JavaScript 检测崭新型控件有没有可用， 整一个... 如果可用则替换掉默认文本框。

第三步：

- 如果不可用， 就保持原来的文本框，不作用于用户体验，干就完了！。

示例代码

// 虚假设我们有一个 ID 为 dateInput 的元素
var el = document.getElementById;
if  {
   // 创建一个临时元素检查 support
   var test = document.createElement;
   test.type = 'date';
   if  {
      // 支持的话就改成 date 类型
      el.type = 'date';
   } else {
      // 不支持就保持 text
      el.type = 'text';
   }
}

为哪些不直接采用现代化化库？

This question is super important for newbies.，干就完了！

• MJ libs like Modernizr may say “yes” but UI might still be missing.
• You don't want extra bundle size just for one feature check.
• If you care about performance on mobile devices, 娱乐ter inline simple detection logic.
• The above code is lightweight enough for most projects.

fallback 的细节：什么时候触发？何处触发？

• 如果你把放在页面上， 部分陈旧 IE 会把它当作纯文本处理，而不是弹出日历或者时间段选择器。这种情况称为“降级”，但它只发生在解析阶段；DOM 属性依陈旧是 datetime-local 。
• iOS 和 Android 原生浏览器会根据 type 值自动调出对应键盘， 这点非常平稳，即使 IE Mobile 在早期也曾尝试过类似功能。
• 不要误觉得“未被支持”就等于“不可靠”。即使没有原生 UI，你仍然能够通过 polyfill 或者自定义脚本给用户友良好的交互体验。

更更多信息和资源条件链接:

简洁 CSS 样式示例，让输入框更酷炫吧！

说白了就是... 姓名： 诞生日期： 最炎热爱颜色： 邮箱：

& 较小贴士

• * 写完后一定要在主流浏览器和移动端都跑一遍，看下UI有没有正常。尤其是在 iOS / Android 原生键盘会出现不同风格哦。
• * 用前面提到的行为检测方式， 你能够轻巧松判断当前周边环境有没有真实正支持这一些崭新型控件，从而决定有没有需要添加 polyfill 或者自定义组件。
• * 如果你担心兼容性问题， 能够考虑引入一个较小型 polyfill，举个例子 https://github.com/jackmoore/date-fns 或者自己的自定义实现，只要足够简洁即可满足需求。
©2026 不了解谁写的 | 本文仅供学习了解交流，请勿商用侵权。如需转载请联系作者授权，谢谢！ **说明**：
• 上面全部 `