我遇到了一个奇怪的问题。我目前正在为iOS 6开发一个使用HTML5和CSS3的移动Web应用程序。
但是,当 input
元素获得焦点并显示软键盘时,窗口将滚动,以便输入不会被键盘遮挡(即使在任何情况下都不会遮挡输入)。
我已经在SO上和通过Google阅读,可以添加以下内容以防止这种行为(在UIWebView中查看时):
input.onfocus = function () {
window.scrollTo(0, 0);
document.body.scrollTop = 0;
}
但是,似乎在iOS 6中,即使窗口最初滚动到0,0
,然后再次滚动以将焦点元素居中。有没有人遇到过这种情况,他们知道iOS 6的修复程序吗?
我也遇到了这个问题。以下内容适用于 iOS 6:
<input onfocus="this.style.webkitTransform = 'translate3d(0px,-10000px,0)'; webkitRequestAnimationFrame(function() { this.style.webkitTransform = ''; }.bind(this))"/>
基本上,由于 Safari 会根据文本框的垂直位置决定是否滚动页面,因此您可以通过暂时将元素移动到屏幕顶部上方,然后在焦点事件完成后再次返回来欺骗它。
缺点是元素消失几分之一秒。如果要解决此问题,可以在原始位置动态插入原始元素的克隆,然后在webkitRequestAnimationFrame
回调中删除它。
可能是时间问题吗?
尝试将其包装在超时中,以确保它在本机事件触发后触发。
input.onfocus = function () {
setTimeout(function() {
window.scrollTo(0, 0);
document.body.scrollTop = 0;
}, 50)
}
更新:虽然公认的解决方案适用于UIWebView,但更新的更快的WKWebView已经到来。如果您使用的是最新版本的 Cordova for iOS,您可以为 iOS 9 设备启用 WKWebView,但默认情况下,视图仍会向上滚动。要解决此问题,只需添加键盘插件(不再需要CSS黑客):
在终端中添加 Cordova 插件:
cordova platform add ios@4
cordova plugin add cordova-plugin-wkwebview-engine --save
cordova plugin add cordova-plugin-keyboard --save
将iOS首选项设置为在Cordova的配置中使用WKWebView.xml
<platform name="ios">
<feature name="CDVWKWebViewEngine">
<param name="ios-package" value="CDVWKWebViewEngine" />
</feature>
<preference name="CordovaWebViewEngine" value="CDVWKWebViewEngine" />
</platform>
然后在科尔多瓦的配置中插入iOS键盘首选项.xml
<preference name="KeyboardShrinksView" value="true" />
<preference name="DisallowOverscroll" value="true" />
有关iOS首选项的更多详细信息,请参阅Cordova文档:https://cordova.apache.org/docs/en/5.4.0/guide/platforms/ios/config.html
将input
的字体大小样式设置为 1em
或更高。
<input type=text style="font-size:1.2em">