Safari中未填充HTML5數據列表標記
[英]HTML5 datalist tag is not populating in Safari
問題描述
我有一個datalist標記，該標記允許我的用戶使用建議框。 但是，我注意到野生動物園不支持此功能。 有沒有解決此問題的方法？
這是我的代碼-我實際上是用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">
我也有一個小提琴在這里
6 個解決方案
解決方案1
27 2016-02-15 11:15:22
Safari和/或舊版瀏覽器的HTML5數據列表解決方法
更新，2017年1月
iOS或台式機Safari仍不支持datalist ，到目前為止，這種變化尚無跡象。 因此，這是一個黑客， 似乎可以解決此問題。 克里斯·科耶爾（Chris Coyier） 在2011年也參加了一個數據列表polyfill 。 讓我們希望Safari在將來實現現有的W3C建議 。
原始帖子：
您可以在datalist 使用select元素 ，並在其中將option標簽值復制為可讀文本。 例如：
<!DOCTYPE html>
<html>
<head>
<title>test</title>
<style>
input[list="languages"] {
width: 12em;
border: none;
background: #eee;
}
select {
width: 12em;
margin: 0;
margin-left: -12.75em;
}
</style>
</head>
<body>
Choose: <input type="text" list="languages">
<label for="languages">
<datalist id="languages">
<select>
<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>
</datalist>
</label>
</body>
</html>
支持的瀏覽器將僅顯示datalist ，Safari和較舊的瀏覽器將顯示option標簽的innerHTML。 input標簽具有默認邊框，在Safari中，該邊框在select元素后看起來很差，但是如本示例所示，它具有一些樣式，可以避免Safari缺乏支持並保持相同的功能外觀。 無需Javascript和/或polyfill。
解決方案2
22 已采納 2014-12-15 22:13:39
Safari不支持數據列表元素。 http://caniuse.com/#feat=datalist
解決方案3
9 2016-11-19 22:03:50
我意識到它有點晚了，但是，對於那些想要模擬Safari上數據列表而不是用select代替它的解決方案的人：
https://github.com/Fyrd/purejs-datalist-polyfill
基本上，您可以在HTML中包含簡短而甜美的.js和.css，它使數據列表鏈接輸入在Safari和Opera mini上的行為與在Chrome，Firefox和Android瀏覽器上的行為相同。
解決方案4
5 2019-04-05 18:17:01
解決方案5
1 2018-08-28 06:55:20
首先，感謝George為您編寫的腳本今天可以再次使用。 對於那些麻煩原因，您的選擇顯示在左上角（例如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
解決方案6
0 2018-11-04 20:07:47
除了Mianto關於iamse7en問題的說法之外，為了將您的數據列表綁定到動態DIV（Mianto給出的示例，然后Moritz編輯的示例是硬編碼的），請在第51行更改以下內容：
function convert(input, datalist, listItems) {
var fakeList = document.createElement('ul');
var visibleItems = null;
fakeList.id = listId;
fakeList.className = LIST_CLASS;
document.body.appendChild( fakeList );
至：
function convert(input, datalist, listItems) {
var fakeList = document.createElement('ul');
var visibleItems = null;
fakeList.id = listId;
fakeList.className = LIST_CLASS;
input.parentNode.style.position = "relative";
input.parentNode.appendChild( fakeList );
HTML5 datalist 標簽在 Safari 中沒有按預期工作
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.