本文介绍了输入焦点时,iOS 8.3固定HTML元素消失的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我有一种奇怪的情况,听起来很像,但有一个转折。这只在父文档可滚动时才会发生。我也在使用iframe。以下是我正在显示的HTML表示形式

 使用位置:绝对的

似乎不可行,因为 .myCtrl 无法从输入焦点收到任何事件通知。

-webkit-overflow-scrolling :touch; 似乎不可行,因为 .myCtrl 被添加到主体,并且我无法控制内容结构。



似乎也不起作用。

决方案

我有同样的问题,这是我想出了以解决这个问题。
问题在于Iframe容器正在失去其位置(我的位置已修复),并且它变为绝对位置。



所以我希望它在修复时打开键盘,确保窗口不会滚动太多。



所以这里是代码:

  window.onscroll = function(){//当键盘打开时调用
if(window.pageYOffset> window.innerHeight / 3){//我的决定你可以像使用
一样玩它。window.scrollTo(0,window.innerHeight / 3);
if(document.getElementById('IframeWrapperID')。style.position!=='fixed'){
document.getElementById('IframeWrapperID')。style.position ='fixed';
}
}
};

*我的iframe具有绝对位置。
希望它有帮助。


I have a strange situation that sounds very much like the many fixed element issues with iOS on Stack Overflow, but with a twist. This only happens when the parent document is scrollable. I am also using an iframe. Below is a representation of the HTML I am displaying

<body>
   /*
    main content
    */

   <div class="myCtrl">
     <iframe src="page2.htm"/>//iframe contains html page with an input element
     <div></div>
   </div>
</body>

.myCtrl has a style of:

 .myCtrl {
    max-width: none;
    max-height: 690px;
    width: 100vw;
    height: 75vh;
    bottom: 0;
    z-index: 1000;
    right: 0;
}

The iframe contains several input elements that when focused (and soft keyboard pops up), .myCtrl is pushed out of view. If I type something, .myCtrl comes back in to view and is displayed correctly. If I remove focus from an input, .myCtrl does NOT leave the view and correctly stays put. The .myCtrl will then behave correctly, respecting position:fixed, for the rest of the browser session regardless if an input has focus or not.

both the parent page and the iframe have <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" /> in the header.

Meta tag solutions don't seem to work.

using position:absolute doesn't seem feasible since .myCtrl is not able to receive any event notifications from input focus.

-webkit-overflow-scrolling:touch; doesn't seem feasible since .myCtrl is appended to the body, and I have no control over the content structure.

css font resizing doesn't seem to work either.

解决方案

I had the same problem and this is what I came up with in order to solve it.The issue is that the Iframe container is losing his position (mine was fixed ) and it get changed to absolute.

so I wanted it to be fixed when the keyboard is open, and make sure that the window wont scroll too much.

so here is the code:

window.onscroll = function () {//is called when the keyboard is open
    if (window.pageYOffset > window.innerHeight / 3) {//my decision you can play with it as you would like
        window.scrollTo(0, window.innerHeight / 3);
        if (document.getElementById('IframeWrapperID').style.position !== 'fixed')  {
            document.getElementById('IframeWrapperID').style.position = 'fixed';
        }
    }
};

*My iframe had position absolute.Hope it helped.

这篇关于输入焦点时,iOS 8.3固定HTML元素消失的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!

08-30 23:39
查看更多