blocks|key|526060|text|我在应用程序中遇到了这个问题。以下是我如何解决它的方法：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|526061|input.on('focus',+function(){
++++header.css({position:'absolute'});
});
input.on('blur',+function(){
++++header.css({position:'fixed'});
});|code-block|syntax|javascript|526062|我只是滚动到顶部并将其放置在那里，这样iOS用户就不会注意到任何奇怪的事情。将其封装在一些用户代理检测中，这样其他用户就不会得到这种行为。|526063|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|L|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|M|8|@]|9|@]|A|$]]|$1|I|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|J|$]]

I had this problem in my application. Here's how I'm working around it:

<pre><code>input.on('focus', function(){
 header.css({position:'absolute'});
});
input.on('blur', function(){
 header.css({position:'fixed'});
});
</code></pre>

I'm just scrolling to the top and positioning it there, so the iOS user doesn't notice anything odd going on. Wrap this in some user agent detection so other users don't get this behavior.

blocks|key|742380|text|我在ipad上遇到了一个稍有不同的问题，虚拟键盘将我的视窗推到了屏幕外。然后，在用户关闭虚拟键盘后，我的视区仍然不在屏幕上。在我的例子中，我做了类似以下的事情：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|742381|var+el+=+document.getElementById('someInputElement');
function+blurInput()+{
++++window.scrollTo(0,+0);
}
el.addEventListener('blur',+blurInput,+false);|code-block|syntax|javascript|742382|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

I had a slightly different ipad issue where the virtual keyboard pushed my viewport up offscreen. Then after the user closed the virtual keyboard my viewport was still offscreen. In my case I did something like the following:

<pre><code>var el = document.getElementById('someInputElement');
function blurInput() {
 window.scrollTo(0, 0);
}
el.addEventListener('blur', blurInput, false);
</code></pre>

blocks|key|525964|text|这是我们用来解决ipad问题的代码。它基本上是检测偏移和滚动位置之间的差异--这意味着'fixed‘不能正常工作。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|525965|$(window).bind('scroll',+function+()+{
++++var+$nav+=+$(".navbar")
++++var+scrollTop+=+$(window).scrollTop();
++++var+offsetTop+=+$nav.offset().top;

++++if+(Math.abs(scrollTop+-+offsetTop)+>+1)+{
++++++++$nav.css('position',+'absolute');
++++++++setTimeout(function(){
++++++++++++$nav.css('position',+'fixed');
++++++++},+1);
++++}
});|code-block|syntax|javascript|525966|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

This is the code we use to fix problem with ipad. It basically detect discrepancies between offset and scroll position - which means 'fixed' isn't working correctly.

<pre><code>$(window).bind('scroll', function () {
 var $nav = $(".navbar")
 var scrollTop = $(window).scrollTop();
 var offsetTop = $nav.offset().top;

 if (Math.abs(scrollTop - offsetTop) &gt; 1) {
 $nav.css('position', 'absolute');
 setTimeout(function(){
 $nav.css('position', 'fixed');
 }, 1);
 }
});
</code></pre>

blocks|key|742305|text|当键盘打开时，位置固定元素根本不会更新它们的位置。我发现，通过欺骗Safari，使其认为页面已经调整了大小，元素将重新定位。它不是完美的，但至少你不必担心切换到‘位置:绝对’并自己跟踪变化。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|742306|下面的代码只监听用户何时可能正在使用键盘(由于输入被聚焦)，直到它听到模糊为止，它只监听任何滚动事件，然后执行调整大小的操作。到目前为止，似乎对我来说工作得很好。|742307|++++var+needsScrollUpdate+=+false;
++++$(document).scroll(function(){
++++++++if(needsScrollUpdate)+{
++++++++++++setTimeout(function()+{
++++++++++++++++$("body").css("height",+"%2B=1").css("height",+"-=1");
++++++++++++},+0);
++++++++}
++++});
++++$("input,+textarea").live("focus",+function(e)+{
++++++++needsScrollUpdate+=+true;
++++});

++++$("input,+textarea").live("blur",+function(e)+{
++++++++needsScrollUpdate+=+false;
++++});|code-block|syntax|javascript|742308|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|L|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|M|8|@]|9|@]|A|$G|H]]|$1|I|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|J|$]]

The position fixed elements simply don't update their position when the keyboard is up. I found that by tricking Safari into thinking that the page has resized, though, the elements will re-position themselves. It's not perfect, but at least you don't have to worry about switching to 'position: absolute' and tracking changes yourself.

The following code just listens for when the user is likely to be using the keyboard (due to an input being focused), and until it hears a blur it just listens for any scroll events and then does the resize trick. Seems to be working pretty well for me thus far.

<pre><code> var needsScrollUpdate = false;
 $(document).scroll(function(){
 if(needsScrollUpdate) {
 setTimeout(function() {
 $("body").css("height", "+=1").css("height", "-=1");
 }, 0);
 }
 });
 $("input, textarea").live("focus", function(e) {
 needsScrollUpdate = true;
 });

 $("input, textarea").live("blur", function(e) {
 needsScrollUpdate = false;
 });
</code></pre>

blocks|key|526014|text|以防有人遇到这个帖子，就像我在研究这个问题时做的那样。我发现这个帖子有助于激发我对这个问题的思考。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|526015|这是我在最近的一个项目中的解决方案。您只需将"targetElem“的值更改为表示您的标头的jQuery选择器。|526016|if(navigator.userAgent.match(/iPad/i)+!=+null){

var+iOSKeyboardFix+=+{
++++++targetElem:+$('#fooSelector'),
++++++init:+(function(){
++++++++$("input,+textarea").on("focus",+function()+{
++++++++++iOSKeyboardFix.bind();
++++++++});
++++++})(),

++++++bind:+function(){
++++++++++++$(document).on('scroll',+iOSKeyboardFix.react);++
+++++++++++++++++iOSKeyboardFix.react();++++++
++++++},

++++++react:+function(){

++++++++++++++var+offsetX++=+iOSKeyboardFix.targetElem.offset().top;
++++++++++++++var+scrollX+=+$(window).scrollTop();
++++++++++++++var+changeX+=+offsetX+-+scrollX;+

++++++++++++++iOSKeyboardFix.targetElem.css({'position':+'fixed',+'top'+:+'-'%2BchangeX%2B'px'});

++++++++++++++$('input,+textarea').on('blur',+iOSKeyboardFix.undo);

++++++++++++++$(document).on('touchstart',+iOSKeyboardFix.undo);
++++++},

++++++undo:+function(){

++++++++++iOSKeyboardFix.targetElem.removeAttr('style');
++++++++++document.activeElement.blur();
++++++++++$(document).off('scroll',iOSKeyboardFix.react);
++++++++++$(document).off('touchstart',+iOSKeyboardFix.undo);
++++++++++$('input,+textarea').off('blur',+iOSKeyboardFix.undo);
++++++}
};

};|code-block|syntax|javascript|526017|由于iOS会在滚动时停止DOM操作，因此在修复生效过程中会有一点延迟，但它确实做到了……|526018|entityMap^0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|N|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|O|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|6|7|P|8|@]|9|@]|A|$]]|$1|K|3|-4|5|6|7|Q|8|@]|9|@]|A|$]]]|L|$]]

Just in case somebody happens upon this thread as I did while researching this issue. I found this thread helpful in stimulating my thinking on this issue.

This was my solution for this on a recent project. You just need to change the value of "targetElem" to a jQuery selector that represents your header.

<pre><code>if(navigator.userAgent.match(/iPad/i) != null){

var iOSKeyboardFix = {
 targetElem: $('#fooSelector'),
 init: (function(){
 $("input, textarea").on("focus", function() {
 iOSKeyboardFix.bind();
 });
 })(),

 bind: function(){
 $(document).on('scroll', iOSKeyboardFix.react); 
 iOSKeyboardFix.react(); 
 },

 react: function(){

 var offsetX = iOSKeyboardFix.targetElem.offset().top;
 var scrollX = $(window).scrollTop();
 var changeX = offsetX - scrollX; 

 iOSKeyboardFix.targetElem.css({'position': 'fixed', 'top' : '-'+changeX+'px'});

 $('input, textarea').on('blur', iOSKeyboardFix.undo);

 $(document).on('touchstart', iOSKeyboardFix.undo);
 },

 undo: function(){

 iOSKeyboardFix.targetElem.removeAttr('style');
 document.activeElement.blur();
 $(document).off('scroll',iOSKeyboardFix.react);
 $(document).off('touchstart', iOSKeyboardFix.undo);
 $('input, textarea').off('blur', iOSKeyboardFix.undo);
 }
};

};
</code></pre>

There is a little bit of a delay in the fix taking hold because iOS stops DOM manipulation while it is scrolling, but it does the trick...

blocks|key|525872|text|我为这个bug找到的其他答案都不适用于我。我可以通过简单地将页面向上滚动34px来修复它，这是移动safari向下滚动的数量。使用jquery：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|525873|$('.search-form').on('focusin',+function(){
++++$(window).scrollTop($(window).scrollTop()+%2B+34);
});|code-block|syntax|javascript|525874|这显然将在所有浏览器中生效，但它可以防止它在iOS中中断。|525875|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|L|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|M|8|@]|9|@]|A|$]]|$1|I|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|J|$]]

None of the other answers I've found for this bug have worked for me. I was able to fix it simply by scrolling the page back up by 34px, the amount mobile safari scrolls it down. with jquery:

<pre><code>$('.search-form').on('focusin', function(){
 $(window).scrollTop($(window).scrollTop() + 34);
});
</code></pre>

This obviously will take effect in all browsers, but it prevents it breaking in iOS.

blocks|key|526277|text|这个问题真的很烦人。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|526278|我结合了上面提到的一些技术，并提出了以下建议：|526279|$(document).on('focus',+'input,+textarea',+function()+{
++++$('.YOUR-FIXED-DIV').css('position',+'static');
});

$(document).on('blur',+'input,+textarea',+function()+{
++++setTimeout(function()+{
++++++++$('.YOUR-FIXED-DIV').css('position',+'fixed');
++++++++$('body').css('height',+'%2B=1').css('height',+'-=1');
++++},+100);
});|code-block|syntax|javascript|526280|我有两个固定的导航栏(页眉和页脚，使用twitter+bootstrap)。当键盘打开时，两者都表现得很奇怪，在键盘关闭后，它们又表现得很奇怪。|526281|有了这个定时/延迟修复，它就可以工作了。我仍然偶尔会发现一个小故障，但它似乎足够好地向客户展示它。|526282|如果这对你有效，请告诉我。如果不是，我们也许可以找到其他东西。谢谢。|526283|entityMap^0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|Q|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|R|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|S|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|6|7|T|8|@]|9|@]|A|$]]|$1|K|3|L|5|6|7|U|8|@]|9|@]|A|$]]|$1|M|3|N|5|6|7|V|8|@]|9|@]|A|$]]|$1|O|3|-4|5|6|7|W|8|@]|9|@]|A|$]]]|P|$]]

This issue is really annoying.

I combined some of the above mentioned techniques and came up with this:

<pre><code>$(document).on('focus', 'input, textarea', function() {
 $('.YOUR-FIXED-DIV').css('position', 'static');
});

$(document).on('blur', 'input, textarea', function() {
 setTimeout(function() {
 $('.YOUR-FIXED-DIV').css('position', 'fixed');
 $('body').css('height', '+=1').css('height', '-=1');
 }, 100);
});
</code></pre>

I have two fixed navbars (header and footer, using twitter bootstrap).
Both acted weird when the keyboard is up and weird again after keyboard is down.

With this timed/delayed fix it works. I still find a glitch once in a while, but it seems to be good enough for showing it to the client.

Let me know if this works for you. If not we might can find something else. Thanks.

blocks|key|526715|text|我在使用iOS7时也遇到了同样的问题。底部固定的元素会弄乱我的视图，不能正确聚焦。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|526716|当我将这个meta标签添加到我的html中时，所有这些都开始工作了。|526717|<meta+name="viewport"+content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no,height=device-height"+>|code-block|syntax|javascript|526718|产生差异的部分是：|526719|height=device-height|526720|希望这能帮助到一些人。|526721|entityMap^0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|Q|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|R|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|S|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|6|7|T|8|@]|9|@]|A|$]]|$1|K|3|L|5|F|7|U|8|@]|9|@]|A|$G|H]]|$1|M|3|N|5|6|7|V|8|@]|9|@]|A|$]]|$1|O|3|-4|5|6|7|W|8|@]|9|@]|A|$]]]|P|$]]

I was experiencing same issue with iOS7. Bottom fixed elements would mess up my view not focus properly.

All started working when I added this meta tag to my html.

<pre><code>&lt;meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no,height=device-height" &gt;
</code></pre>

The part which made the difference was:

<pre><code>height=device-height
</code></pre>

Hope that helps someone.

blocks|key|742947|text|我有一个类似于@NealJMD的解决方案，只是我的解决方案只在iOS上执行，并通过测量本机键盘滚动前后的scollTop以及使用setTimeout来允许本机滚动发生，从而正确地确定滚动偏移量：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|742948|var+$window+=+$(window);
var+initialScroll+=+$window.scrollTop();
if+(navigator.userAgent.match(/iPhone%7CiPad%7CiPod/i))+{
++setTimeout(function+()+{
++++$window.scrollTop($window.scrollTop()+%2B+(initialScroll+-+$window.scrollTop()));
++},+0);
}|code-block|syntax|javascript|742949|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

I have a solution similar to @NealJMD except mine only executes for iOS and correctly determines the scroll offset by measuring the scollTop before and after the native keyboard scrolling as well as using setTimeout to allow the native scrolling to occur:

<pre><code>var $window = $(window);
var initialScroll = $window.scrollTop();
if (navigator.userAgent.match(/iPhone|iPad|iPod/i)) {
 setTimeout(function () {
 $window.scrollTop($window.scrollTop() + (initialScroll - $window.scrollTop()));
 }, 0);
}
</code></pre>

blocks|key|742743|text|我已经这样固定了我的Ipad主布局内容的位置：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|742744|var+mainHeight;
var+main+=+$('.main');

//+hack+to+detects+the+virtual+keyboard+close+action+and+fix+the+layout+bug+of+fixed+elements+not+being+re-flowed
function+mainHeightChanged()+{
++++$('body').scrollTop(0);
}

window.setInterval(function+()+{
++++if+(mainHeight+!==+main.height())mainHeightChanged();
++++mainHeight+=+main.height();
},+100);|code-block|syntax|javascript|742745|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

I have fixed my Ipad main layout content fixed position this way:

<pre><code>var mainHeight;
var main = $('.main');

// hack to detects the virtual keyboard close action and fix the layout bug of fixed elements not being re-flowed
function mainHeightChanged() {
 $('body').scrollTop(0);
}

window.setInterval(function () {
 if (mainHeight !== main.height())mainHeightChanged();
 mainHeight = main.height();
}, 100);
</code></pre>

blocks|key|742840|text|我遇到了与@ds111类似的问题。我的网站被键盘推了上去，但当键盘关闭时，它并没有向下移动。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|742841|首先，我尝试了@ds111解决方案，但我有两个input字段。当然，首先键盘消失，然后模糊发生(或类似的事情)。因此，当焦点直接从一个输入切换到另一个输入时，第二个input在键盘下面。|offset|length|style|CODE|742842|此外，“跳起来”对我来说还不够好，因为整个页面只有ipad的大小。所以我把卷轴画得很平滑。|742843|最后，我必须将事件侦听器附加到所有输入，即使是那些当前隐藏的输入，因此是live。|742844|总而言之，我可以解释以下javascript代码片段:将以下模糊事件侦听器附加到当前和所有未来的input和textarea+(=live)：等待宽限期(=+window.setTimeout(...,+10))并平滑地滚动到顶部(=+animate({scrollTop:+0},+...))，但仅当“没有显示键盘”(=+if($('input:focus,+textarea:focus').length+==+0))时。|742845|$('input,+textarea').live('blur',+function(event)+{
++++window.setTimeout(function()+{
++++++++if($('input:focus,+textarea:focus').length+==+0)+{
++++++++++++$("html,+body").animate({+scrollTop:+0+},+400);
++++++++}
++++},+10)
})|code-block|syntax|javascript|742846|请注意，宽限期(=+10)可能太短，或者即使未聚焦input或textarea，键盘仍可能显示。当然，如果您希望滚动更快或更慢，您可以调整持续时间(=+400)|742847|entityMap^0|0|N|5|2A|5|0|0|10|4|0|1C|5|1I|8|1T|4|27|Q|3A|S|4I|1C|0|0|A|2|P|5|V|8|24|3|0^^$0|@$1|2|3|4|5|6|7|W|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|X|8|@$D|Y|E|Z|F|G]|$D|10|E|11|F|G]]|9|@]|A|$]]|$1|H|3|I|5|6|7|12|8|@]|9|@]|A|$]]|$1|J|3|K|5|6|7|13|8|@$D|14|E|15|F|G]]|9|@]|A|$]]|$1|L|3|M|5|6|7|16|8|@$D|17|E|18|F|G]|$D|19|E|1A|F|G]|$D|1B|E|1C|F|G]|$D|1D|E|1E|F|G]|$D|1F|E|1G|F|G]|$D|1H|E|1I|F|G]]|9|@]|A|$]]|$1|N|3|O|5|P|7|1J|8|@]|9|@]|A|$Q|R]]|$1|S|3|T|5|6|7|1K|8|@$D|1L|E|1M|F|G]|$D|1N|E|1O|F|G]|$D|1P|E|1Q|F|G]|$D|1R|E|1S|F|G]]|9|@]|A|$]]|$1|U|3|-4|5|6|7|1T|8|@]|9|@]|A|$]]]|V|$]]

I had a similar problem to @ds111 s. My website was pushed up by the keyboard but didn't move down when the keyboard closed.

First I tried @ds111 solution but I had two <code>input</code> fields. Of course, first the keyboard goes away, then the blur happens (or something like that). So the second <code>input</code> was under the keyboard, when the focus switched directly from one input to the other.

Furthermore, the "jump up" wasn't good enough for me as the whole page only has the size of the ipad. So I made the scroll smooth.

Finally, I had to attach the event listener to all inputs, even those, that were currently hidden, hence the <code>live</code>.

All together I can explain the following javascript snippet as:
Attach the following blur event listener to the current and all future <code>input</code> and <code>textarea</code> (=<code>live</code>): Wait a grace period (= <code>window.setTimeout(..., 10)</code>) and smoothly scroll to top (= <code>animate({scrollTop: 0}, ...)</code>) but only if "no keyboard is shown" (= <code>if($('input:focus, textarea:focus').length == 0)</code>).

<pre class="lang-js prettyprint-override"><code>$('input, textarea').live('blur', function(event) {
 window.setTimeout(function() {
 if($('input:focus, textarea:focus').length == 0) {
 $("html, body").animate({ scrollTop: 0 }, 400);
 }
 }, 10)
})
</code></pre>

Be aware, that the grace period (= <code>10</code>) may be too short or the keyboard may still be shown although no <code>input</code> or <code>textarea</code> is focused. Of course, if you want the scrolling faster or slower, you may adjust the duration (= <code>400</code>)

blocks|key|742901|text|我真的很努力地找到了这个变通方法，简而言之，它在输入上寻找焦点和模糊事件，并在事件发生时滚动以选择性地更改固定条的位置。这是防弹的，涵盖了所有情况(使用<>、滚动、完成按钮导航)。注意:+id="nav“是我固定的页脚div。您可以轻松地将其移植到标准js或jquery。这是供使用电动工具的人使用的道场;-)|type|unstyled|depth|inlineStyleRanges|entityRanges|data|742902|define(+"dojo/ready"，"dojo/query"，，function(ready，query){|742903|ready(function(){

++++/*+This+addresses+the+dreaded+"fixed+footer+floating+when+focusing+inputs+and+keybard+is+shown"+on+iphone+
+++++*+
+++++*/
++++if(navigator.userAgent.match(/iPhone/i)){
++++++++var+allInputs+=+query('input,textarea,select');
++++++++var+d+=+document,+navEl+=+"nav";
++++++++allInputs.on('focus',+function(el){
+++++++++++++d.getElementById(navEl).style.position+=+"static";
++++++++});

++++++++var+fixFooter+=+function(){
++++++++++++if(d.activeElement.tagName+==+"BODY"){
++++++++++++++++d.getElementById(navEl).style.position+=+"fixed";
++++++++++++}
++++++++};
++++++++allInputs.on('blur',+fixFooter);
++++++++var+b+=+d.body;
++++++++b.addEventListener("touchend",+fixFooter+);
++++}

});|code-block|syntax|javascript|742904|})；//结束定义|742905|entityMap^0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|N|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|O|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|6|7|P|8|@]|9|@]|A|$]]|$1|K|3|-4|5|6|7|Q|8|@]|9|@]|A|$]]]|L|$]]

really worked hard to find this workaround, which in short looks for focus and blur events on inputs, and scrolling to selectively change the positioning of the fixed bar when the events happen. This is bulletproof, and covers all cases (navigating with &lt;>, scroll, done button). Note id="nav" is my fixed footer div. You can easily port this to standard js, or jquery. This is dojo for those who use power tools ;-)

define([
 "dojo/ready",
 "dojo/query",
], function(ready, query){

<pre><code>ready(function(){

 /* This addresses the dreaded "fixed footer floating when focusing inputs and keybard is shown" on iphone 
 * 
 */
 if(navigator.userAgent.match(/iPhone/i)){
 var allInputs = query('input,textarea,select');
 var d = document, navEl = "nav";
 allInputs.on('focus', function(el){
 d.getElementById(navEl).style.position = "static";
 });

 var fixFooter = function(){
 if(d.activeElement.tagName == "BODY"){
 d.getElementById(navEl).style.position = "fixed";
 }
 };
 allInputs.on('blur', fixFooter);
 var b = d.body;
 b.addEventListener("touchend", fixFooter );
 }

});
</code></pre>

}); //end define

blocks|key|526545|text|这是一个很难“正确”的问题。您可以尝试隐藏输入元素焦点上的页脚，并在模糊上显示，但这在iOS上并不总是可靠的。每隔一段时间(比如在我的iPhone+4S上)，焦点事件似乎无法触发(或者可能存在竞争条件)，而且页脚也不会被隐藏。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|526546|经过多次试验和错误，我想出了这个有趣的解决方案：|526547|<head>
++++...various+JS+and+CSS+imports...
++++<script+type="text/javascript">
++++++++document.write(+'<style>#footer{visibility:hidden}@media(min-height:'+%2B+($(+window+).height()+-+10)+%2B+'px){#footer{visibility:visible}}</style>'+);
++++</script>
</head>|code-block|syntax|javascript|526548|本质上:使用JavaScript来确定设备的窗口高度，然后动态创建一个CSS+media查询，以便在窗口高度缩小10个像素时隐藏页脚。因为打开键盘会调整浏览器显示的大小，所以这在iOS上从不会失败。因为它使用的是CSS引擎而不是JavaScript，所以它也更快更流畅！|526549|注意:我发现使用'visibility:hidden‘比使用'display:none’或'position:static‘更容易出错，但你的里程数可能会有所不同。|526550|entityMap^0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|O|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|P|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|Q|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|6|7|R|8|@]|9|@]|A|$]]|$1|K|3|L|5|6|7|S|8|@]|9|@]|A|$]]|$1|M|3|-4|5|6|7|T|8|@]|9|@]|A|$]]]|N|$]]

This is a difficult problem to get 'right'. You can try and hide the footer on input element focus, and show on blur, but that isn't always reliable on iOS. Every so often (one time in ten, say, on my iPhone 4S) the focus event seems to fail to fire (or maybe there is a race condition), and the footer does not get hidden.

After much trial and error, I came up with this interesting solution:

<pre><code>&lt;head&gt;
 ...various JS and CSS imports...
 &lt;script type="text/javascript"&gt;
 document.write( '&lt;style&gt;#footer{visibility:hidden}@media(min-height:' + ($( window ).height() - 10) + 'px){#footer{visibility:visible}}&lt;/style&gt;' );
 &lt;/script&gt;
&lt;/head&gt;
</code></pre>

Essentially: use JavaScript to determine the window height of the device, then dynamically create a CSS media query to hide the footer when the height of the window shrinks by 10 pixels. Because opening the keyboard resizes the browser display, this never fails on iOS. Because it's using the CSS engine rather than JavaScript, it's much faster and smoother too!

Note: I found using 'visibility:hidden' less glitchy than 'display:none' or 'position:static', but your mileage may vary.

blocks|key|526577|text|对我很管用|type|unstyled|depth|inlineStyleRanges|entityRanges|data|526578|if+(navigator.userAgent.match(/iPhone%7CiPad%7CiPod/i))+{
++++$(document).on('focus',+'input,+textarea',+function()+{
++++++++$('header').css({'position':'static'});
++++});
++++$(document).on('blur',+'input,+textarea',+function()+{
++++++++$('header').css({'position':'fixed'});
++++});
}|code-block|syntax|javascript|526579|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

Works for me 

<pre><code>if (navigator.userAgent.match(/iPhone|iPad|iPod/i)) {
 $(document).on('focus', 'input, textarea', function() {
 $('header').css({'position':'static'});
 });
 $(document).on('blur', 'input, textarea', function() {
 $('header').css({'position':'fixed'});
 });
}
</code></pre>

blocks|key|743129|text|在我们的例子中，只要用户滚动，它就会自动修复。这是我们用来在任何input或textarea上模拟blur滚动的修复：|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|743130|$(document).on('blur',+'input,+textarea',+function+()+{
++++setTimeout(function+()+{
++++++++window.scrollTo(document.body.scrollLeft,+document.body.scrollTop);
++++},+0);
});|code-block|syntax|javascript|743131|entityMap^0|W|5|12|8|1D|4|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@$9|N|A|O|B|C]|$9|P|A|Q|B|C]|$9|R|A|S|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|T|8|@]|D|@]|E|$I|J]]|$1|K|3|-4|5|6|7|U|8|@]|D|@]|E|$]]]|L|$]]

In our case this would fix itself as soon as user scrolls. So this is the fix we've been using to simulate a scroll on <code>blur</code> on any <code>input</code> or <code>textarea</code>: 

<pre><code>$(document).on('blur', 'input, textarea', function () {
 setTimeout(function () {
 window.scrollTo(document.body.scrollLeft, document.body.scrollTop);
 }, 0);
});
</code></pre>

blocks|key|526921|text|我的回答是，这是不可能的。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|526922|我看到了25个答案，但没有一个在我的案例中有效。这就是为什么雅虎和其他网页在键盘打开时隐藏固定标题的原因。Bing将整个页面变为不可滚动(overflow-y:隐藏)。|526923|上面讨论的情况是不同的，一些在滚动时有问题，一些在焦点或模糊上。有些有固定的页脚或页眉。我现在不能测试每种组合，但您最终可能会意识到在您的情况下不能这样做。|526924|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|H|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|I|8|@]|9|@]|A|$]]|$1|D|3|E|5|6|7|J|8|@]|9|@]|A|$]]|$1|F|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|G|$]]

My answer is that it can't be done.

I see 25 answers but none work in my case. That's why Yahoo and other pages hide the fixed header when the keyboard is on. And Bing turns the whole page non-scrollable (overflow-y: hidden).

The cases discussed above are different, some have issues when scrolling, some on focus or blur. Some have fixed footer, or header. I can't test now each combination, but you might end up realizing that it can't be done in your case.

blocks|key|742571|text|在Github上找到了这个解决方案。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|742572|https://github.com/Simbul/baker/issues/504#issuecomment-12821392|offset|length|742573|确保你有可滚动的内容。|742574|//+put+in+your+.js+file
$(window).load(function(){
++++window.scrollTo(0,+1);
});

//+min-height+set+for+scrollable+content
<div+id="wrap"+style="min-height:+480px">
++//+website+goes+here
</div>|code-block|syntax|javascript|742575|地址栏可以折叠起来作为额外的奖励。|742576|entityMap|0|LINK|mutability|MUTABLE|url^0|0|0|1S|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|V|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|W|8|@]|9|@$D|X|E|Y|1|Z]]|A|$]]|$1|F|3|G|5|6|7|10|8|@]|9|@]|A|$]]|$1|H|3|I|5|J|7|11|8|@]|9|@]|A|$K|L]]|$1|M|3|N|5|6|7|12|8|@]|9|@]|A|$]]|$1|O|3|-4|5|6|7|13|8|@]|9|@]|A|$]]]|P|$Q|$5|R|S|T|A|$U|C]]]]

Found this solution on Github.

<a href="https://github.com/Simbul/baker/issues/504#issuecomment-12821392" rel="nofollow">https://github.com/Simbul/baker/issues/504#issuecomment-12821392</a>

Make sure you have scrollable content.

<pre><code>// put in your .js file
$(window).load(function(){
 window.scrollTo(0, 1);
});

// min-height set for scrollable content
&lt;div id="wrap" style="min-height: 480px"&gt;
 // website goes here
&lt;/div&gt;
</code></pre>

The address bar folds up as an added bonus.

blocks|key|742625|text|以防有人想试试这个。我让下面的代码在带有输入字段的固定脚注上为我工作。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|742626|<script>
++++$('document').ready(
++++++++function()+{
++++++++++++if+(navigator.userAgent.match(/Android/i)+%7C%7C+navigator.userAgent.match(/webOS/i)+%7C%7C+navigator.userAgent.match(/iPhone/i)+%7C%7C+navigator.userAgent.match(/iPad/i)
++++++++++++++++++%7C%7C+navigator.userAgent.match(/iPod/i)+%7C%7C+navigator.userAgent.match(/BlackBerry/i)+%7C%7C+navigator.userAgent.match(/Windows+Phone/i))+{
++++++++++++++++var+windowHeight+=+$(window).height();
++++++++++++++++var+documentHeight+=+$(document).height();

++++++++++++++++$('#notes').live('focus',+function()+{
++++++++++++++++++++if+(documentHeight+>+windowHeight)+{
++++++++++++++++++++++++$('#controlsContainer').css({
++++++++++++++++++++++++++++position+:+'absolute'
++++++++++++++++++++++++});
++++++++++++++++++++++++$("html,+body").animate({
++++++++++++++++++++++++++++scrollTop+:+$(document).height()
++++++++++++++++++++++++},+1);
++++++++++++++++++++}
++++++++++++++++});
++++++++++++++++$('#notes').live('blur',+function()+{
++++++++++++++++++++$('#controlsContainer').css({
++++++++++++++++++++++++position+:+'fixed'
++++++++++++++++++++});
++++++++++++++++++++$("html,+body").animate({
++++++++++++++++++++++++scrollTop+:+0
++++++++++++++++++++},+1);
++++++++++++++++});
++++++++++++}
++++++++});
</script>|code-block|syntax|javascript|742627|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

In case anyone wanted to try this. I got the following working for me on a fixed footer with an inputfield in it.

<pre><code>&lt;script&gt;
 $('document').ready(
 function() {
 if (navigator.userAgent.match(/Android/i) || navigator.userAgent.match(/webOS/i) || navigator.userAgent.match(/iPhone/i) || navigator.userAgent.match(/iPad/i)
 || navigator.userAgent.match(/iPod/i) || navigator.userAgent.match(/BlackBerry/i) || navigator.userAgent.match(/Windows Phone/i)) {
 var windowHeight = $(window).height();
 var documentHeight = $(document).height();

 $('#notes').live('focus', function() {
 if (documentHeight &gt; windowHeight) {
 $('#controlsContainer').css({
 position : 'absolute'
 });
 $("html, body").animate({
 scrollTop : $(document).height()
 }, 1);
 }
 });
 $('#notes').live('blur', function() {
 $('#controlsContainer').css({
 position : 'fixed'
 });
 $("html, body").animate({
 scrollTop : 0
 }, 1);
 });
 }
 });
&lt;/script&gt;
</code></pre>

blocks|key|526211|text|我也有同样的问题。但我意识到，固定位置只是延迟了，并没有被破坏(至少对我来说)。等待5-10秒，看看div是否调整回屏幕底部。我认为这不是错误，而是键盘打开时的延迟响应。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|526212|entityMap^0|0^^$0|@$1|2|3|4|5|6|7|D|8|@]|9|@]|A|$]]|$1|B|3|-4|5|6|7|E|8|@]|9|@]|A|$]]]|C|$]]

I have the same issue. But I realized that the fixed position is just delayed and not broken (at least for me). Wait 5-10 seconds and see if the div adjusts back to the bottom of the screen. I believe it's not an error but a delayed response when the keyboard is open.

blocks|key|526806|text|如果有人在寻找一条完全不同的路径(比如你甚至不想在滚动时锁定这个"+footer“div，而只是希望div留在页面底部)，你只需将页脚位置设置为相对位置即可。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|526807|这意味着即使虚拟键盘出现在你的移动浏览器上，你的页脚也只会固定在页面的底部，而不是试图对虚拟键盘的显示或关闭做出反应。|526808|显然，在Safari上，如果位置固定，并且当你向上或向下滚动时，页脚跟随页面，效果会更好，但由于Chrome上的这个奇怪的bug，我们最终切换到只使页脚相对。|526809|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|H|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|I|8|@]|9|@]|A|$]]|$1|D|3|E|5|6|7|J|8|@]|9|@]|A|$]]|$1|F|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|G|$]]

If anybody was looking for a completely different route (like you are not even looking to pin this "footer" div as you scroll but you just want the div to stay at the bottom of the page), you can just set the footer position as relative. 

That means that even if the virtual keyboard comes up on your mobile browser, your footer will just stay anchored to the bottom of the page, not trying to react to virtual keyboard show or close. 

Obviously it looks better on Safari if position is fixed and the footer follows the page as you scroll up or down but due to this weird bug on Chrome, we ended up switching over to just making the footer relative.

blocks|key|743340|text|所有的滚动解决方案似乎都不适合我。取而代之的是，在用户编辑文本时将正文的位置设置为固定，然后在用户编辑完文本后将其恢复为静态。这可以防止safari在你身上滚动你的内容。您可以在元素的焦点/模糊(如下所示的单个元素，但可以是所有输入、文本)上执行此操作，或者，如果用户正在执行某些操作以开始编辑，如打开一个模式，您可以在该操作上执行此操作(例如，模式打开/关闭)。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|743341|$("#myInput").on("focus",+function+()+{
++++$("body").css("position",+"fixed");
});

$("#myInput").on("blur",+function+()+{
++++$("body").css("position",+"static");
});|code-block|syntax|javascript|743342|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

None of the scrolling solutions seemed to work for me. Instead, what worked is to set the position of the body to fixed while the user is editing text and then restore it to static when the user is done. This keeps safari from scrolling your content on you. You can do this either on focus/blur of the element(s) (shown below for a single element but could be for all input, textareas), or if a user is doing something to begin editing like opening a modal, you can do it on that action (e.g. modal open/close).

<pre><code>$("#myInput").on("focus", function () {
 $("body").css("position", "fixed");
});

$("#myInput").on("blur", function () {
 $("body").css("position", "static");
});
</code></pre>

I have a mobile website which has a div pinned to the bottom of the screen via position:fixed. All works fine in iOS 5 (I'm testing on an iPod Touch) until I'm on a page with a form. When I tap into an input field and the virtual keyboard appears, suddenly the fixed position of my div is lost. The div now scrolls with the page as long as the keyboard is visible. Once I click Done to close the keyboard, the div reverts to its position at the bottom of the screen and obeys the position:fixed rule.

Has anyone else experienced this sort of behavior? Is this expected? Thanks.

iOS 5 fixed positioning and virtual keyboard

Android

Windows

jQuery

我有一个移动网站，其中有一个div固定在屏幕底部通过位置:固定。在iOS 5(我在iPod Touch上测试)中一切正常，直到我在一个带有表单的页面上。当我点击输入字段，出现虚拟键盘时，div的固定位置突然丢失了。现在，只要键盘可见，div就会随页面一起滚动。单击完成关闭键盘后，div将恢复到屏幕底部的位置，并遵循位置:固定规则。还有其他人经历过这种行为吗？这是意料之中的吗？谢谢。

问iOS 5固定定位和虚拟键盘
EN

回答 21

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问iOS 5固定定位和虚拟键盘EN

回答 21

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问iOS 5固定定位和虚拟键盘
EN