android - jquery mobile，Android 中的 Chrome 版本 50 选择菜单出错

Question

我已将我的 Chrome 浏览器更新到最新版本，但我遇到了以下问题:

当我选择一个选择菜单的选项时，它没有显示为选中，我重复选择过程，然后选择确定。如果我尝试选择其他选项，它会发生同样的情况，第一次不好，第二次好。自从我更新到 Chrome 的第 50 版后，它就发生了，而以前的第 49 版工作正常。

我使用的是搭载 Android 5.1.1 的华为 Y5，它与搭载 Android 6 的 Nexus 一样。

我的jquery mobile版本是1.4.5

这似乎只发生在 Android 中的 Chrome 版本 50 上，在桌面上工作正常。在华为自带的浏览器下，正常。

测试这个问题很简单，直接看jquery mobile的select menu的demo:

http://demos.jquerymobile.com/1.4.5/selectmenu/

一件重要的事情，在以前版本的 jquery mobile 中工作正常，示例:

http://demos.jquerymobile.com/1.3.2/widgets/selects/

有什么办法可以解决这个问题吗？任何帮助将不胜感激。

提前致谢

费利克斯。

Answer 1

我不得不质疑 JQuery Mobile 在默认情况下隐藏 select 元素焦点上的工具栏背后的逻辑。 native 浏览器 select 元素以各种特殊方式覆盖页面，甚至是非 native 选择弹出窗口(当指定数据属性 data-native-menu="false" 在 html 或 nativeMenu: false 在 selectmenu 选项中)绝对定位为对话框。这意味着工具栏确实不会影响到选择菜单选项的不动产，因为它们将始终覆盖包括工具栏在内的所有内容。对我来说，这使得第 12664 - 12692 行的代码被注释为:这隐藏了弹出键盘上的工具栏以提供更多屏幕空间，而不是选择元素所必需的。

解决方法/解决方案:幸好 jQuery-Mobile 允许您使用数据属性 data-hide-during-focus 覆盖页眉/页脚中的此设置 - 只需将其设置为:

data-hide-during-focus="input, textarea"

当一个选择元素获得焦点时，它不会再试图隐藏工具栏。

即简单地改变你的标题:

<div data-role="header" data-position="fixed" data-tap-toggle="false">
  Header
</div><!-- /header -->

到:

<div data-role="header" data-position="fixed" data-tap-toggle="false"  data-hide-during-focus="input, textarea">
  Header
</div><!-- /header -->

...页脚也是如此。