iOS上的Phonegap应用程序 - 页面在文本输入焦点上滚动

时间:2013-02-06 19:33:39

标签: ios cordova scroll focus

今天我在iOS上面临“典型”问题,当用户选择输入文本时页面会滚动。关键是我正在使用包含大量文本的可滚动页面,我需要这个。所以我不能使用一个通过防止默认,最小化视图等来禁用scolling的解决方案。

我基本上需要在不滚动页面的情况下打开软件键盘。

我还需要找到一个适合我的用户的解决方案 - 没有屏幕闪烁等等......经过一番研究,我终于找到了一个可行的解决方案。

请参阅下面的答案。

1 个答案:

答案 0 :(得分:3)

我们的想法是尽快将页面返回到原始位置,从而阻止iOS滚动动画。

您只需在输入文本字段中添加focus处理程序,在此处理程序中首先读取window.scrollTop属性,然后将其设置为0 ms的延迟。

这是我的代码(使用jQuery):

$("#myinput").on("focus", function() {
    var scrollTop = $(window).scrollTop();
    setTimeout(function() {
        $(window).scrollTop = scrollTop;
    }, 0);
});

我希望这里没有错误 - 实际上我正在使用TypeScript,所以如果你想在这里看到我的原始代码,那就是:

this._inputText.on("focus", () => {
    var jQueryWin:JQuery = <JQuery>$(window);
    var scrollTop:number = jQueryWin.scrollTop();   
    setTimeout(() => {
        jQueryWin.scrollTop(scrollTop);
    }, 0);
});

好的 - 我希望这可以帮助你们在处理输入元素时更好地控制不需要的页面滚动。