我有一个datalist标签,它允许我的用户拥有一个建议框。然而,我注意到safari不支持这个特性。有没有解决这个问题的办法?
这是我的代码-我实际上是用ajax方法填充我的值,但填充后的结果如下所示:
<datalist id="languages">
<option value="HTML">
<option value="CSS">
<option value="JavaScript">
<option value="Java">
<option value="Ruby">
<option value="PHP">
<option value="Go">
<option value="Erlang">
<option value="Python">
<option value="C">
<option value="C#">
<option value="C++">
</datalist>
Search:
<input type="text" list="languages">
我还有一个fiddle here
发布于 2014-12-16 06:13:40
Safari中不支持Datalist元素。http://caniuse.com/#feat=datalist
发布于 2016-11-20 06:03:50
我意识到现在有点晚了,但是,对于那些想要一个在Safari上模拟datalist的解决方案的人来说,而不是用select:
https://github.com/Fyrd/purejs-datalist-polyfill
基本上是一个简短而甜蜜的.js和.css,你可以将它们包含在你的html中,它使得日期专家链接的输入在Safari和Opera mini上的表现与在Chrome,Firefox和安卓浏览器上的一样。
发布于 2018-08-28 14:55:20
首先,谢谢你,乔治,你的脚本今天再次工作。对于那些由于您的选项显示在左上角(如iamse7en)而出现问题的情况,您应该在datalist.polyfill.js中修改以下行:
56:
document.body.appendChild( fakeList ); document.getElementById("myIdDiv").appendChild( fakeList );
因为在github项目的例子中,它只是主体中的一个div,所以它不是问题。
110:
input.value = item.innerText; input.value = item.innerHTML;
单击项目上的任意位置,而不仅仅是文本。
最后,在html文件中添加<script src="/static/js/datalist.polyfill.js"></script>
,但不添加datalist.polyfill.min.js版本
https://stackoverflow.com/questions/27494084
复制相似问题