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

Javascript 防止在键盘显示iOS 6上滚动,javascript,iphone,html,ios6,mobile-website,Javascript,Iphone,Html,Ios6,Mobile Website,我遇到了一个奇怪的问题。我目前正在为iOS 6制作一个仅使用HTML5和CSS3的移动web应用程序 但是,当输入元素接收到焦点并显示软键盘时,窗口会滚动,以便键盘不会遮挡输入(即使在任何情况下都不会) 我通过谷歌了解到,可以添加以下内容来防止这种行为(在UIWebView中查看时): 然而,在iOS 6中,似乎即使窗口最初滚动到0,0,它也会再次滚动到焦点元素的中心。是否有其他人遇到过这种情况,并且知道iOS 6的修复方法?将输入的字体大小样式设置为1em或更高 可能是时间问题吗 尝试在超时时

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

但是,当
输入
元素接收到焦点并显示软键盘时,窗口会滚动,以便键盘不会遮挡输入(即使在任何情况下都不会)

我通过谷歌了解到,可以添加以下内容来防止这种行为(在UIWebView中查看时):


然而,在iOS 6中,似乎即使窗口最初滚动到
0,0
,它也会再次滚动到焦点元素的中心。是否有其他人遇到过这种情况,并且知道iOS 6的修复方法?

输入的字体大小样式设置为
1em
或更高


可能是时间问题吗

尝试在超时时间内结束它,以确保它在本机事件触发后触发

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

我也谈到了这个问题。以下内容适用于iOS 6:

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

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

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

更新: 虽然公认的解决方案与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的config.xml中使用WKWebView

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

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

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

有关iOS首选项的更多详细信息,请参见Cordova文档:

如果将其设置为更大,会怎么样
2em
很抱歉回复太晚,我刚刚收到关于此事的SO通知!它工作得很好,谢谢你的修复。