防止在键盘显示 iOS 6 上滚动答案

【问题标题】：Prevent scrolling on keyboard display iOS 6防止在键盘显示 iOS 6 上滚动
【发布时间】：2012-11-23 12:51:14
【问题描述】：

我遇到了一个奇怪的问题。我目前正在制作一个仅适用于 iOS 6 的使用 HTML5 和 CSS3 的移动网络应用程序。

但是，当input 元素获得焦点并显示软键盘时，窗口会滚动，以使输入不会被键盘遮挡（即使在任何情况下都不会遮挡）。

我已经阅读了 SO 并通过 Google 可以添加以下内容来防止这种行为（在 UIWebView 中查看时）：

input.onfocus = function () {
    window.scrollTo(0, 0);
    document.body.scrollTop = 0;
}

然而，似乎在 iOS 6 中，即使窗口最初滚动到 0,0，它也会再次滚动到焦点元素的中心。有没有其他人遇到过这个问题，他们知道 iOS 6 的修复方法吗？

【问题讨论】：

标签： javascript iphone html ios6 mobile-website

【解决方案1】：

我也遇到了这个问题。以下适用于 iOS 6：

<input onfocus="this.style.webkitTransform = 'translate3d(0px,-10000px,0)'; webkitRequestAnimationFrame(function() { this.style.webkitTransform = ''; }.bind(this))"/>

基本上，由于 Safari 会根据文本框的垂直位置决定是否滚动页面，因此您可以通过将元素暂时移动到屏幕顶部上方然后在焦点事件完成后再次返回来欺骗它。

缺点是元素会在几分之一秒内消失。如果您想解决这个问题，您可以在原始位置动态插入原始元素的克隆，然后在 webkitRequestAnimationFrame 回调中将其删除。

【讨论】：

抱歉回复晚了，我才收到关于这个的 SO 通知！效果很好，感谢修复。

【解决方案2】：

会不会是时间问题？

尝试在超时后将其包装起来，以确保它在本机事件触发后触发。

input.onfocus = function () {
    setTimeout(function() {
        window.scrollTo(0, 0);
        document.body.scrollTop = 0;
    }, 50)
}

【讨论】：

如果你把它设置得更大呢？ 2em

【解决方案3】：

更新： 虽然公认的解决方案适用于 UIWebView，但更新更快的 WKWebView 已经到来。如果您使用最新版本的 iOS 版 Cordova，您可以为 iOS 9 设备启用 WKWebView，但默认情况下，视图仍会向上滚动。要解决这个问题，只需添加键盘插件（不再需要 CSS hack）：

在终端中添加 Cordova 插件：

cordova platform add ios@4
cordova plugin add cordova-plugin-wkwebview-engine --save
cordova plugin add cordova-plugin-keyboard --save

在 Cordova 的 config.xml 中设置 iOS 偏好以使用 WKWebView

<platform name="ios">
    <feature name="CDVWKWebViewEngine">
        <param name="ios-package" value="CDVWKWebViewEngine" />
    </feature>
    <preference name="CordovaWebViewEngine" value="CDVWKWebViewEngine" />
</platform>

然后在 Cordova 的 config.xml 中插入 iOS 键盘首选项

    <preference name="KeyboardShrinksView" value="true" />
    <preference name="DisallowOverscroll" value="true" />

Cordova 文档中列出了有关 iOS 首选项的更多详细信息： https://cordova.apache.org/docs/en/5.4.0/guide/platforms/ios/config.html

【讨论】：

【解决方案4】：

将input 的字体大小样式设置为1em 或更高。

<input type=text style="font-size:1.2em">

【讨论】：