iOS 8.3 修复 HTML 元素在输入焦点上消失
Posted
技术标签:
【中文标题】iOS 8.3 修复 HTML 元素在输入焦点上消失【英文标题】：iOS 8.3 fixed HTML element disappears on input focus 【发布时间】：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 似乎也不起作用。
【问题讨论】：
【参考方案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 有绝对位置。 希望对您有所帮助。
【讨论】：
以上是关于iOS 8.3 修复 HTML 元素在输入焦点上消失的主要内容，如果未能解决你的问题，请参考以下文章
IOS下H5的input/textarea元素失去焦点时隐藏键盘
在 iOS Safari 中输入焦点后无法滚动的模式（固定元素）