Question

我犯了一个可怕的错误，即在没有先查看它的情况下使用html功能，而且，当我距离部署网站几个小时的时候，我发现Safari不支持datalist ... < / p>

http://caniuse.com/#search=datalist

这是一个相当麻烦的事情，因为这个特定网站的大部分观众都是技术受损的，因此，我希望safari占网站所有访问权的30-50％。

现在，我可以看到如何使用JavaScript编写简单的数据集填充程序，这样我就可以只包含一个脚本标记，并且无需填充整个html即可轻松解决问题，但是我找不到说的JavaScript。

我不是要求你们写这些，如果我想浪费一大堆时间，我显然可以自己这样做。我希望你们知道一个真正经过考验的图书馆，我现在似乎无法找到我的愚蠢和愤怒。

在有人对这个问题做出评论之前，是的，我觉得不要在Safari上进行并行测试是很愚蠢的，因为我的用户可能会有来自那里的一半...但后见之明是20-20

编辑：我应该提一下，我发现了两个令人遗憾的插件，Jquery＆amp; modernizer依赖，而这确实是我不愿意接受的那种依赖。

编辑：有人在没有明显阅读问题的情况下将此问题标记为重复。因此，我将重申我的问题：

我想要一个Javascript脚本，用于填充Safari / Opera mini的数据列表。现在，让我们来看看这些条款，我们是否应该：

- ＆GT; Javascript！= Hmtml - ＆GT; polyfill：https://en.wikipedia.org/wiki/Polyfill让我TL; DR：允许您实现浏览器不支持的功能。

- ＆GT; datalist：允许用户在输入元素中动态键入单词，并从下拉列表中建议自动完成。它看起来像这样：

<body>
Choose: <input type="text" list="languages">
<label for="languages">
    <datalist id="languages">
      <option value="JavaScript"></option>
      <option value="Haskell"></option>
      <option value="Ruby"></option>
      <option value="Go"></option>
      <option value="Python"></option>
      <option value="etc"></option>
    </datalist>
</label>

https://jsfiddle.net/a5o2cna3/

另一个答案的问题是： a）它需要html编辑，它不是你无痛地插入的javascript，并允许其他人不经常阅读代码：他妈的是什么？ b）它通过select元素替换datalist。如果您不希望用户输入除预定义选项之外的任何内容，它可以服务于相同的目的，如果您不关心元素如何在视觉上看起来如果您不关心这个事实，而不是键入，用户必须从列表中选择（在移动设备上非常烦人）。

这就是建议的解决方案的工作方式（“重复”问题中的解决方案）：

<body>
Choose: <input type="text" list="languages">
<label for="languages">
    <select id="languages">
      <option value="JavaScript">JavaScript</option>
      <option value="Haskell">Haskell</option>
      <option value="Ruby">Ruby</option>
      <option value="Go">Go</option>
      <option value="Python">Python</option>
      <option value="etc">etc</option>
    </select>
</label>

https://jsfiddle.net/vv63pptj/

所以，这个问题确实很相似，但它类似于一个问题，这个问题并没有像我想要的那样解决它，而是“坏死的”（甚至不知道它是否可能）。

现在，举例说明我想要的东西（并在github上挖掘后发现）：

https://github.com/Fyrd/purejs-datalist-polyfill

- ＆GT;没有外部依赖，只有几百行的js和css - ＆GT;可以简单地包含在html中，它使现有的数据列表工作，而不会破坏html - ＆GT;使输入元素在safari和opear mini上的行为与firefox，chrome和android浏览器中的行为相同。它提供相同的功能，看起来一样。它不是“用一个具有不同行为但通常用于类似情况的元素替换你的元素”它是一个“这用不支持它的浏览器用javascript模仿你的元素”

我会将这个答案发布到类似的问题上，以防人们阅读，想要一个替代方案。但我想尽可能清楚地解释为什么这不是重复，因为有人问过我。

Answer 1

我的问题的答案被发现在github上挖掘了一下：

https://github.com/Fyrd/purejs-datalist-polyfill

基本上你可以在你的html中包含一个简短而甜蜜的.js和.css，它使得数据列表链接输入在Safari和Opera mini上的行为与在Chrome，Firefox和Android浏览器上的行为相同。

Answer 2

Safari支持将成为即将到来的iOS和MacOS版本的一部分，很有可能将在2月底/ 3月初发布。

您也可以为此使用另一个polyfill：https://github.com/mfranzke/datalist-polyfill/

用于在Safari / Opera上启用datalist的脚本

2 个答案: