Bootstrap-Eingang mit Dataist Drop-down funktioniert nicht auf dem iPhone (6s)

Question

Ich schrieb eine einfache HTML5/Javascript Anwendung. Ich benutzte die bootstrap3 (js & css). Die App selbst sollte mobil freundlich sein:

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

Auf mobilen Geräten das Aussehen & Gefühl, als ausgelegt ist, mit Ausnahme einer Frage: I-Eingänge bin mit (in einem .well) mit Datenlisten wie folgt aus:

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

Die Liste funktioniert auf Android 5.x-Handys mit Chrome und Firefox Browser.

Aber auf meinem iPhone (6s) im Safari und Chrome Browser werden die Werte der Liste nicht angezeigt. Ist das ein bekanntes Problem? Weiß jemand, wie man das repariert?

Danke!

Answer 1

Für alle, die immer noch suchen: diese erstaunliche Workaround hat mich gerettet. Es ist eine editierbare über JS auszuwählen, die die gleiche Funktionalität wie Eingang hat + Datalist https://github.com/indrimuska/jquery-editable-select

Answer 2

w3schools Laut, wird Safari nicht Datalist-Tag unterstützen, obwohl der Teil des HTML5-Standard ist.

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

Chrome auf dem iPhone verwendet auch hauptsächlich den gleichen Motor wie Safari da Apple nicht 3rd-Party-Browser-Engines auf ihrem OS ermöglicht wird. Deshalb haben Sie das gleiche Verhalten von beiden Browsern auf dem iPhone erfahren.

In diesem Fall können keine anderen Lösungen als Workarounds verwendet werden.