Question

我写了一个简单的HTML5 / Javascript应用程序。我使用了bootstrap3（js＆amp; css）。该应用程序本身应该是移动友好的：

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

在移动设备上，外观＆amp;感觉是设计的，除了一个问题：我正在使用输入（在.well内）与这样的数据列表：

 <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和firefox浏览器的Android 5.x手机上运行良好。

但是在我的iPhone（6s）的safari和chrome浏览器中，列表的值不显示。这是一个已知的问题？有人知道如何解决这个问题吗？

谢谢！

Answer 1

对于所有仍在寻找的人：这个惊人的解决方法救了我。它是一个可编辑的选择通过JS，它具有与input + datalist相同的功能 https://github.com/indrimuska/jquery-editable-select

Answer 2

根据w3schools，Safari不支持datalist标签，即使这是HTML5标准的一部分。

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

iPhone上的Chrome也主要使用与Safari相同的引擎，因为Apple未在其操作系统上启用第三方浏览器引擎。这就是为什么你在iPhone上的两个浏览器都遇到了相同的行为。

在这种情况下，没有其他解决方案可以使用解决方法。

带有datalist下拉列表的Bootstrap输入不适用于iPhone（6s）

2 个答案: