不同输入类型的 Datalist

前几天我看到了一个 HTML5 日期输入，它在右侧有一个下拉箭头，我已经习惯于点击它来显示一个日历日期选择器，从中选择日期。

通常，它看起来像这样

我以前见过一些变体，比如当你使用星期输入而不是日期时

但我以前从未见过这个

事实证明，当您将<datalist>应用于这种类型的输入时，就会得到它！谁知道呢！

格式如下

<input list="days" type="date">
<datalist id="days">
  <option label="Chris' Birthday">1980-08-26</option>
  <option label="Apollo 11 Moon Landing">1969-07-20</option>
  <option label="DDay">1944-06-06</option>
</datalist>

每个选项的值只需要是输入的有效值，否则它们就不会显示。

浏览器支持

据我了解，规范没有规定 HTML5 输入类型的任何特定 UI 要求。如果浏览器想要构建一个日期选择器，很好，但如果不这样做并不违反规范。因此，这种额外的 UI 增强功能也不是必需的。我之所以提到这一点，是因为这里缺少“支持”并不表示浏览器做得不好。

这些花哨的 datalist 输入似乎主要是 Blink 的特性。

快速检查一下**最新版本的浏览器**，仅测试带有datalist的input type="date"

• Chrome 38 = 可用
• Opera 23 = 可用
• Safari 8.0 = 不支持 input type=”date”
• Firefox 32 = 不支持 input type=”date”
• Internet Explorer 11 = 不支持 input type=”date”
• iOS 8.1 = 日期可用/datalist 不可用（见截图）
• Android 5 = 可用（见截图）
• Opera Mobile 11.5 = 日期可用/datalist 不可用

“支持”再次意味着“不做任何特殊处理”——但会回退到可用的文本输入。

这就是这类功能的症结所在。如果它只是一个你可以提供的、但不是至关重要的细微功能，那就使用它，并将其视为渐进增强。如果对您的网站的所有用户来说，选择推荐选项的 UI 绝对至关重要，并且您支持不支持此功能的浏览器，则您需要一个 polyfill 或自定义解决方案。

其他类型

日期并非唯一可以享受到乐趣的类型！在整理这些内容时，我偶然发现了 Eiji Kitamura 的 综合测试页面，其中包含所有这些内容。datalist 不仅适用于text 和date 输入，还适用于所有类型的date 输入以及color 和range！

type="range"

type="color"