HTML數據列表與選項值輸入文本

當谷歌瀏覽器，這讓我輸入「B」或「R」下來後接從下拉「紅」「藍」：HTML數據列表與選項值輸入文本

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

然而，在Safari中並沒有。

爲什麼？
如果我想在Safari中這樣做，我需要做什麼？

來源

2014-12-30 benbeck1990

的datalist標籤不被的Safari支撐，並且是部分地由IE支持，檢出所述支撐here。

你應該考慮（如果你想允許多個值與多個屬性）使用select標籤：

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

或者你可以使用Relevant Dropdown一個HTML5數據列表填充工具，可以幫助你要解決你的crossbrowser問題。

來源

2014-12-30 02:26:47 ianaya89

<datalist>標記實際上不是原生在Safari中支持。但是，這個問題有幾個解決方案。以下是與<datalist>標籤兼容的瀏覽器列表。
鉻：20.0
IE：10.0
火狐：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
使用一個填充工具的方案來解決它。這更復雜。您必須使用modenizr庫來完成此任務。
http://css-tricks.com/relevant-dropdowns-polyfill-for-datalist/
解決方案d
您可以使用一個命令datafill庫如webshim，它使您能夠可靠地使用跨瀏覽器的HTML5功能，儘管沒有原生支持。
http://afarkas.github.io/webshim/demos/

來源

2014-12-30 02:28:16

HTML數據列表與選項值輸入文本

回答

相關問題