iOS 上的 Jquery mobile 1.4 页面底部的固定元素隐藏焦点上的输入文本

你好，我正在使用 Jquery mobile 1.4 构建 cordova 3 应用程序

我的 Mac 上的 Safari 和 Chrome 对以下内容没有任何问题，但是当我在真实设备或 iOS 模拟器上部署并想要在字段中输入时，我会发现页面底部的固定元素向上移动并与输入元素重叠。光标在输入字段所在的正确位置闪烁，但页脚的滑块将其隐藏。

为了简单起见，我的页面如下所示：

[标题已修复] 带有输入文本的 div 带有输入文本的 div 带有输入文本的 div [页脚固定]

输入文本实例之一

<input data-role="none" class="inputCalc gray_br" type="text" id="grams4" value="37"><div class="macro_g">grams</div>

底部的滑块

<div id="cal_slider" style="position:fixed; bottom:0px; left:0px; height:57px; width:100%; background-color:#E2E2E2;">
<form style="padding-top:6px" class="full-width-slider"><label for="slider-12" class="ui-hidden-accessible">Slider:</label> <input type="range" data-highlight="true" name="slider-12" id="slider-12" min="0" max="100" value="50"></form>
</div>

Jquery 显示焦点隐藏和模糊事件

$(document).on('focus', 'input , text', function(e){

    // I have try with --> $("#grams4").focus( function () {... // but it's the same

    console.log("on focus fired");

    $("#cal_slider").hide();

});


$(document).on('blur', 'input, text', function(e){

    console.log("on blur fired");

        $("#cal_slider").show();

});

所以我一直在尝试focus() and blur()用于切换（显示和隐藏）滑块的事件。它在 Chrome 和 Safari 上运行良好。

但在真实设备（iPhone 5 iOS7）上，当我点击输入文本字段时，循环仅在第一次时按预期工作：

(1) 我得到一个焦点日志，页脚被隐藏，(2) 键盘出现，(3) 我可以输入输入文本。

然后（4）当我点击“完成”时，键盘会隐藏，就可以了。 (5) 我在控制台中收到模糊事件，并且带有滑块的页脚再次显示。完美的。

但是，如果我再次点击任何输入文本字段，我会在控制台中看到模糊日志，而不是预期的焦点，并且滑块再次返回到输入字段前面。

正如我上面在 Chrome 中所说的，Safary 运行得很好。

任何其他想法如何检测键盘打开/关闭，也许没有事件处理程序？

这有效：

将以下代码放在多页的结束标记后面。

</body>
<script type="text/javascript">
document.write( '<style>#footer{visibility:hidden}@media(min-height:' + ($( window ).height() - 10) + 'px){#footer{visibility:visible}}</style>' );
</script>
</html>

感谢理查德·肯纳德stackoverflow.com/a/20092755/3166158 https://stackoverflow.com/a/20092755/3166158