Question

在Google Chrome中，这样我就可以在输入“b”或“r”后从下拉列表中选择“红色”和“蓝色”：

<input type="text" list="colors" />
<datalist id="colors">
  <option value="red">
  <option  value="blue">
</datalist>

然而，在Safari中却没有。

为什么？
如果我想在Safari中这样做，我还需要做什么？

Answer 1

Safari中<datalist>标记实际上不支持本机。但是，这个问题有一些解决方案。以下是使用<datalist>标记的浏览器兼容性列表。
Chrome：20.0
IE：10.0
Firefox：4.0
Safari：不支持
歌剧：9.0
解决方案A
您可以考虑使用<select>标签，尽管这有其缺点。与<datalist>标记不同，用户需要选择您给出的其中一个选项。对于<datalist>标记，用户可以输入他想要的任何内容。
解决方案B
创建<select>元素和<input>元素，以匹配<datalist>标记的双重功能。

<p>Choose from this list
<select>
  <option value="a">A</option>
  <option value="b">B</option>
  <option value="c">C</option>
</select>
or type in a custom input
<input type="text" name="custominput">

解决方案C
使用polyfill溶液解决它。这更复杂。您必须使用modenizr库来完成此任务 http://css-tricks.com/relevant-dropdowns-polyfill-for-datalist/
解决方案D
您可以使用数据填充库，例如 webshim ，这使您可以在浏览器中可靠地使用HTML5功能，尽管缺乏本机支持。
http://afarkas.github.io/webshim/demos/

Answer 2

Safari 不支持datalist标记， IE 部分支持，请检查支持here。

您应该考虑使用select标记（如果您想允许多个值，则使用multiple属性）：

＆＃13;

<select multiple>
  <option value="red">red</option>
  <option value="blue">blue</option>
  <option value="green">green</option>
</select>

＆＃13;

或者您可以使用Relevant Dropdown HTML5 datalist polyfill来帮助您修复您的crossbrowser问题。

带有选项值的输入文本的HTML datalist

2 个答案: