Bootstrap輸入與datalist下拉式不適用於iPhone（6s）

Question

我寫了一個簡單的HTML5/Javascript應用程序。 我使用了bootstrap3（js & css）。 軟件本身應該是移動友好：

<meta name="viewport" content="width=device-width, initial-scale=1"> 

在按設計的外觀&感覺的移動設備，但有一個問題： 我使用的輸入（一個.well內）與datalists這樣的：

<div class="form-group"> 
        <label for="userIdType">Type:</label> 
        <input type="text" class="form-control" id="userIdType" list = "lst_userIdTypes" value="AD_ID"> 
        <datalist id="lst_userIdTypes"> 
        <option>AD_ID</option> 
        <option>PU_ID</option> 
        <option>XU_ID</option> 
        <option>DE_ID</option> 
        <option>AP_ID</option> 
        </datalist> 
       </div> 

該列表在Chrome 5.和Chrome瀏覽器的Android 5.x手機上正常工作。

但在我的iPhone（6s）safari和chrome瀏覽器中，列表的值並未顯示。 這是一個已知的問題？有人知道如何解決這個問題嗎？

謝謝！

Answer 1

對於所有仍在尋找的人：這個驚人的解決方法拯救了我。 它是通過JS，其具有相同的功能的輸入+數據列表 https://github.com/indrimuska/jquery-editable-select

Answer 2

根據W3Schools的可編輯的選擇，Safari不支持即使是HTML5標準的一部分數據列表標記。

http://www.w3schools.com/tags/tag_datalist.asp

鉻iPhone上也主要採用了相同的發動機如Safari，因爲蘋果並沒有使他們的OS的第三方瀏覽器引擎。這就是爲什麼你經歷了iPhone上兩種瀏覽器的相同行爲。

在這種情況下，可以使用其他解決方案，而不是解決方法。