防止键盘显示滚动iOS 6

我遇到了一个奇怪的问题。我目前正在为iOS 6制作仅使用HTML5和CSS3的移动网络应用程序。防止键盘显示滚动iOS 6

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

我有阅读上，并通过谷歌是一个可以添加以下，以防止这种行为（查看此一个UIWebView内部时）：

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

然而，似乎在iOS 6中，即使窗口最初滚动到0,0，然后再次滚动以聚焦元素居中。有没有其他人遇到这个问题，他们知道iOS 6的修复吗？

来源

2012-11-23 BenM

我也遇到了这个问题。在iOS 6以下工作：

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

基本上，由于Safari浏览器来决定是否滚动基于文本框的垂直位置的页面，您可以随时移动上面的屏幕上方的元素，然后回诱骗焦点事件结束后再次进行。

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

来源

2013-01-12 19:47:14

对不起，对于迟到的回复，我只是刚刚收到关于此的SO通知！它运作良好，感谢修复。 – BenM

我可以证实，这在iOS7上也能正常工作。 – romiem

-4

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

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

来源

2013-01-10 02:56:46

这没有工作... – BenM

难道是一个时机的问题？

尝试在超时中包装它以确保它在本机事件触发后触发。

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

来源

2013-01-11 16:04:43

对不起，这也不起作用。 – BenM

如果将它设置得更大，该怎么办？'2em' –

如果你把它做成50em，那么怎么样？ lol –

更新： 虽然接受的解决方案与UIWebView一起工作，但更快的WKWebView已经到来。如果您正在使用最新版本的Cordova for iOS，则可以启用WKWebView for iOS 9设备，但默认情况下视图仍会向上滚动。为了解决这个问题只需要添加的键盘插件（没有CSS黑客需要了）：

添加内终端科尔多瓦插件：

cordova platform add [email protected] 
cordova plugin add cordova-plugin-wkwebview-engine --save 
cordova plugin add cordova-plugin-keyboard --save

设置的iOS偏好使用WKWebView科尔多瓦的config.xml

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

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

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

Mo关于iOS偏好的详细信息在科尔多瓦文档上列出： https://cordova.apache.org/docs/en/5.4.0/guide/platforms/ios/config.html

来源

2016-01-06 15:25:42

防止键盘显示滚动iOS 6

回答

相关问题