iOS上的Jquery mobile 1.4页面底部的固定元素隐藏输入文字 [英] Jquery mobile 1.4 on iOS the fixed elements on bottom of page hide input text onfocus

问题描述

我正在用jquery mobile 1.4构建cordova 3应用程序Safari和我的Mac上的Chrome与下面没有关系，但是当我部署在真正的设备，或iOS模拟器，并希望在字段中输入我得到页面的底部固定元素向上移动和重叠的输入元素。光标闪烁在正确的位置，输入字段是，但页脚的滑块隐藏它。

为了简单起见，我的页面看起来像这样： b


$输入文本
div输入文本
div输入文本
div输入文本
[页脚固定]

其中一个输入文本实例

 <输入数据-role =noneclass =inputCalc gray_brtype =textid =grams4value =37>< div class =macro_g> grams< / div> 
  

底部的滑块

 < div id =cal_sliderstyle =position：fixed; bottom：0px; left：0px; height：57px; width：100％; background-color：＃E2E2E2;> 
< form style =padding-top：6pxclass =full-width-slider>< label for =slider-12class =ui-hidden-accessible> Slider： < /标签> < input type =rangedata-highlight =truename =slider-12id =slider-12min =0max =100value =50>< / form> ; 
< / div> 
  

jquery隐藏焦点和模糊事件

  $（document）.on（'focus'，'input，text'，function（e）{
 
 //我试过 - > $（＃grams4）。focus（function（）{... //但它是相同的
 
 console.log（on focus fired）; 
 
 $（＃cal_slider）。hide（）; 
 
}）; 
 
 $ b $（document）.on（'blur'，'input ，文字'，函数（e）{
 
 console.log（on blur fired）; 
 
 $（＃cal_slider）。show（）; 
 
））; 
  

所以我一直在用 focus（） 和 blur（）事件来切换（显示和隐藏）滑块。它可以在Chrome和Safari上正常工作。

在真实的设备上（iPhone 5 iOS7），当我点击输入文本框，周期工作如预期的第一次：

（1）我得到一个焦点日志，页脚隐藏，（2）键盘出现，（3）我可以键入输入然后（4）当我点击DONE键盘隐藏，这是OK的。 （5）在控制台中出现模糊事件，滑块的页脚再次显示。然而，如果我再次点击任何输入文本字段，我得到一个模糊日志在控制台，而不是预期的焦点，滑块去回到前面的输入字段。

正如我在Chrome上面告诉过的，Safary完美地工作。

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

解决方案

这工作：

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

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

Hi there I am building cordova 3 app with Jquery mobile 1.4

Safari, and Chrome on my mac have no issues with the following, but when I deploy on the real device, or iOS simulator and want to type in the fields I get the bottom fixed elements of the page moving up and overlapping the input elements. The cursor is blinking in the right position, where the input field is, but the slider of the footer is hiding it.

To make it simple my page looks like that:

[header fixed] div with input text div with input text div with input text [footer fixed]

one of the input text instances

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

the slider on the bottom

<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 to show hide on focus and blur events

$(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();

});

So I have been trying with focus() and blur() events to toggle (show and hide) the slider. It works fine on Chrome and Safari.

But on real device (iPhone 5 iOS7) when I tap the input textfield, the cycle works like expected the first time only:

(1) I get a focus log, the footer is hidden, (2) the keyboard comes up and (3) I can type in the input text.

Then (4) when I tap DONE the keybord hides and it's OK. (5) I get a blur event in the console, and the footer with the slider shows again. Perfect.

However, if I tap again on any of the input text fields, I get a blur log in the console and not a focus as expected, and the slider goes back again in front of the input field.

As I told above in Chrome, Safary works perfectly.

Any other ideas how to detect keybord on / off, maybe without event handlers ?

解决方案

This works:

put the following code after the closing tag of the multipage.

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

Thanks to Richard Kennard stackoverflow.com/a/20092755/3166158

这篇关于iOS上的Jquery mobile 1.4页面底部的固定元素隐藏输入文字的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！