Javascript 用于在Safari/Opera上启用数据列表的脚本_Javascript_Html_Safari_Polyfills

Javascript 用于在Safari/Opera上启用数据列表的脚本

javascript html safari

Javascript 用于在Safari/Opera上启用数据列表的脚本,javascript,html,safari,polyfills,Javascript,Html,Safari,Polyfills,我犯了一个可怕的错误，在使用html功能时没有首先查找它，你瞧，当我距离部署一个网站还有几个小时的时候，我意识到Safari不支持datalist 这是一件相当麻烦的事情，因为这个特定网站的大部分受众都是技术受损者，因此，我预计safari将占网站访问量的30-50% 现在，我可以看到如何用JavaScript编写一个简单的ish polyfill for datalist，这样我就可以只包含一个脚本标记，无需填充整个html即可轻松解决问题，但我找不到所说的JavaScript 我不是要你们

我犯了一个可怕的错误，在使用html功能时没有首先查找它，你瞧，当我距离部署一个网站还有几个小时的时候，我意识到Safari不支持datalist

这是一件相当麻烦的事情，因为这个特定网站的大部分受众都是技术受损者，因此，我预计safari将占网站访问量的30-50%

现在，我可以看到如何用JavaScript编写一个简单的ish polyfill for datalist，这样我就可以只包含一个脚本标记，无需填充整个html即可轻松解决问题，但我找不到所说的JavaScript

我不是要你们写，如果我想浪费时间，我当然可以自己写。我希望你们知道一个真正经过测试的图书馆，在我的愚蠢和愤怒中，我现在似乎找不到

在任何人对这个问题发表评论之前，是的，考虑到多达一半的用户可能来自Safari，我没有在Safari上进行并行测试是愚蠢的。。。但事后诸葛亮

编辑：我应该提到，我发现了两个插件，很遗憾，Jquery和modernizer依赖于它们，而这正是我不愿意接受的依赖

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

<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>

我想要一个Javascript脚本，可以为Safari/Opera mini多填充数据列表。现在，让我们来看看这些条款，好吗

->Javascript！=Hmtml ->polyfill：让我来；DR：允许您实现浏览器不支持的功能

->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>


选择：

另一个答案的问题是： a）它需要html编辑，它不是一个javascript，你可以毫不费力地插入它，并允许其他人阅读代码而不必去：那他妈的是什么？ b）它用select元素替换数据列表。如果您不希望用户输入预定义选项以外的任何内容，如果您不关心元素的视觉效果，如果您不关心用户必须从列表中进行选择而不是键入，那么它可以达到同样的目的（在移动设备上非常烦人）

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


选择：
JavaScript
哈斯克尔
红宝石
去
python
等

所以，这个问题确实是相似的，但它类似于一个从未以我想要的方式解决的问题，而不是“necro bumping”（甚至不知道是否可能）

现在，举例说明我想要什么（在github上挖掘了一些信息后发现的）：

->没有外部依赖，只有几百行js和css ->可以简单地包含在html中，并使现有的数据列表在不损坏html的情况下工作 ->使输入元素在safari和opear mini上的行为与在firefox、chrome和android浏览器中的行为相同。它提供相同的功能，看起来也一样。它不是“用行为不同但经常用于类似情况的元素替换您的元素”，而是“对于不支持它的浏览器，它用javascript模拟您的元素”

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

我的问题的答案是在github上挖掘了一些信息：

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

Safari支持将是即将发布的iOS和MacOS版本的一部分，最有可能在2月底/3月初发布

您也可以使用另一个polyfill：

请参见此处的解决方案：检查..您只需包含jquery源文件..仅此而已..@Tim这是一个解决方案，它将元素替换为另一个具有不同行为的元素，而不是我要求的。@repzero谢谢，但我一直在寻找一些不涉及像Jquery这样的巨大依赖性的东西。