CODEWITHSUNDEEP
ioscordovascrollfocus
Pavel Stupka
Pavel Stupka

Reputation: 213

Phonegap app on iOS - page scrolls on text input focus

Today I'm facing "a typical" problem on iOS with a page scrolling when a user selects an input text. The point is that I'm using a scrollable page including a lot of texts and I need this. So I can't use a solution that disables scolling by preventing default, minimizing the view etc..

I basically need to open a software keyboard without scrolling the page.

I also need to find a solution that will be suitable for my users - no screen blinking, etc... After some research I finally managed to find a working solution.

Please see my answer below.

Upvotes: 1

Views: 2303

Answers (1)

Pavel Stupka
Pavel Stupka

Reputation: 213

The idea is to return the page to its original position as soon as possible and thus prevent the iOS scrolling animation.

You simply add a focus handler to your input text field and in this handler you firstly read the window.scrollTop property and than set it back with a delay of 0 ms.

Here is my code (using jQuery):

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

I hope there is no bug in this - actually I'm using TypeScript so if you want to see my original code here it is:

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

OK - I hope this helps you guys to better control an unwanted page scrolling when dealing with input elements.

Upvotes: 3

Related Questions