最新消息:雨落星辰是一个专注网站SEO优化、网站SEO诊断、搜索引擎研究、网络营销推广、网站策划运营及站长类的自媒体原创博客

javascript - Bootstrap Input with datalist dropdown doesn´t work on iPhone (6s) - Stack Overflow

programmeradmin1浏览0评论

I wrote a simple HTML5 / Javascript application. I used the bootstrap3 (js & css). The app itself should be mobile friendly:

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

On mobile devices the look & feel is as designed, except for one issue: I am using inputs (inside a .well) with datalists like this:

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

The list works fine on Android 5.x phones with chrome and firefox browser.

But on my iPhone (6s) in safari and chrome browser the values of the list don´t show. Is this a known issue? Does anybody know how to fix that?

Thanks!

I wrote a simple HTML5 / Javascript application. I used the bootstrap3 (js & css). The app itself should be mobile friendly:

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

On mobile devices the look & feel is as designed, except for one issue: I am using inputs (inside a .well) with datalists like this:

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

The list works fine on Android 5.x phones with chrome and firefox browser.

But on my iPhone (6s) in safari and chrome browser the values of the list don´t show. Is this a known issue? Does anybody know how to fix that?

Thanks!

Share Improve this question edited Aug 6, 2016 at 13:22 multilevellist 172 bronze badges asked Aug 5, 2016 at 15:36 mrbmrb 431 gold badge1 silver badge7 bronze badges
Add a ment  | 

2 Answers 2

Reset to default 2

To all who are still looking: this amazing workaround saved me. It is an editable select via JS which has the same functionality as input + datalist https://github./indrimuska/jquery-editable-select

According to w3schools, Safari does not support datalist tag even though that is part of the HTML5 standard.

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

Chrome on iPhone also uses mainly the same engine as Safari since Apple does not enables 3rd party browser engines on their OS. That is why you experienced the same behavior from both browsers on iPhone.

No other solutions, than workarounds can be used in this case.

发布评论

评论列表(0)

  1. 暂无评论