Question

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

Safari和Mac上的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（）和 blur（）事件来切换（显示和隐藏）滑块。它适用于Chrome和Safari。

但是在点击输入文本字段时，在真实设备（iPhone 5 iOS7）上，循环的工作方式与预期的第一次相同：

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

然后（4）当我点击DONE时，键盘隐藏起来就可以了。（5）我在控制台中出现模糊事件，并且滑块的页脚再次显示。完美。

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

正如我上面在Chrome中所说，Safary非常有效。

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

Answer 1

这有效：

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

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

感谢Richard Kennard stackoverflow.com/a/20092755/3166158

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

1 个答案: