jquery mobile,Android版Chrome菜单中的选择菜单出错

Question

我已将Chrome浏览器更新为上一版本,但我遇到以下问题:

当我选择一个选择菜单的选项时,它不会显示为选中状态,我重复选择的过程,然后选择确定.如果我尝试选择其他选项它会发生相同,第一次不好,第二次OK.这是因为我已经更新到Chrome的第50版,以前的版本49它运行正常.

我使用的是搭载Android 5.1.1的华为Y5,搭配Android 6的Nexus也是如此.

我拥有的jquery mobile版本是1.4.5

它似乎只发生在Android版的Chrome版本50中,在桌面上工作正常.在华为的浏览器中,工作正常.

要测试这个问题很简单,只需转到jquery mobile选择菜单的演示:

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

一个重要的事情,在以前版本的jquery mobile中运行良好,例如:

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

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

提前致谢,

费利克斯.

Answer 1

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

解决方法/解决方案：值得庆幸的是，jQuery-Mobile 确实允许您使用数据属性 data-hide-during-focus 覆盖页眉/页脚中的此设置 - 只需将其设置为：

数据隐藏期间焦点=“输入，文本区域”

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

即只需更改您的标题：

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

...页脚也是如此。