iOS 8.3 修复 HTML 元素在输入焦点上消失答案

【问题标题】：iOS 8.3 fixed HTML element disappears on input focusiOS 8.3 修复 HTML 元素在输入焦点上消失
【发布时间】：2015-04-15 13:15:08
【问题描述】：

我有一个奇怪的情况，听起来很像 Stack Overflow 上的 many fixed element issues with iOS，但有一点不同。这仅在父文档可滚动时发生。我也在使用 iframe。下面是我正在显示的 HTML 的表示

<body>
   /*
    main content
    */

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

.myCtrl 的风格为：

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

iframe 包含几个输入元素，当聚焦（并且软键盘弹出）时，.myCtrl 被推到视野之外。如果我输入某些内容，.myCtrl 会返回查看并正确显示。如果我从输入中移除焦点，.myCtrl 不会离开视图并正确地保持不变。然后，.myCtrl 将在浏览器会话的其余部分中正常运行，尊重 position:fixed，无论输入是否具有焦点。

父页面和 iframe 在标题中都有<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" />。

元标记解决方案似乎不起作用。

使用position:absolute 似乎不可行，因为.myCtrl 无法接收来自输入焦点的任何事件通知。

-webkit-overflow-scrolling:touch; 似乎不可行，因为 .myCtrl 附加到正文中，我无法控制内容结构。

css font resizing 似乎也不起作用。

【问题讨论】：

标签： html ios css

【解决方案1】：

我遇到了同样的问题，这就是我想出的解决方法。问题是 Iframe 容器正在失去他的位置（我的位置是固定的）并且它被更改为绝对。

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

代码如下：

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';
        }
    }
};

*我的 iframe 有绝对位置。希望对您有所帮助。

【讨论】：