iOS (6.0.1) JQM 1.2 Popup and input

[NickWallbridge]

I am using a JQM 1.2 pop up over an iscrollview controlled list. The popup has a single input field, plus ok button. When I touch in the input box, the keyboard appears and the view moves up to keep the input visible as expected. However, as soon as I type a character, the view scrolls below the keyboard so you can't see what you are typing. This didn't happen until I implemented iscrollview. Any help would be appreciated.

[NickWallbridge]

Further research may indicate that this is a generic IOS 6.0.1 issue and it was coincidence that I upgraded iOS as well as implementing the iscrollview. The behavior is slightly different without iscrollview, but the dialog still "shifts" when typing into the dialog - just not quite so much.

[jaxtheking]

I am facing the same issue, only with a jQM 1.3 panel. I'm going crazy trying to find a work-around. If I remove iscrollview, the "shifting" upon typing every single character stops, but then the panel's content goes "up and down" with the page's content.

[njtman]

I am also have weird bouncing or shifting issues with JQM 1.3 and iscrollview when typing into input fields on IOS 6. When I removed iscrollview, JQM still bounces up and down when typing into an input.

[jaxtheking]

In my case, when I removed ALL instances of iscrollview, the shifting up/down stopped. It's like there's a $.mobile.silentScroll(0) binded to a keydown event... That would solve fixed headers positioning on pages that do not need scrolling, but on pages that do it creates a far bigger issue. I love iscrollview but this issue makes it un-usable for scrolling pages containing fields. I have now moved away from it but, time permitting, I'd like to take a look at the code to see where this odd behaviour comes from... Hopefully this weekend.

[twilly86]

any update on this issue? I am having the same problem. I'm using a JQuery mobile panel as well which complicates things when I remove iscroll from pages with inputs.

I've set fixInput to false, but it's still creating the bounce around on keyup...

  // Allow mouse clicks through to input elements
  // Note that this is not an issue for touch devices, just mouse
  this._fixInput = function(e) {
  if (this.iscrollview.options.fixInput ) {
        var tagName,
         target = e.target;
         while (target.nodeType !== 1) { target = target.parentNode; }
               tagName = target.tagName.toLowerCase();
               if (tagName === "select" || tagName === "input" || tagName === "textarea") {
                     return;
                }
          }

  // If preventTouchHover, stop hover from occuring inside scroller for jQuery Mobile 1.0
   // (Not used for 1.1)
   if (this.iscrollview.options.preventTouchHover) { e.stopImmediatePropagation(); }
    else                                            { e.preventDefault(); }
};

[kappytown]

This is only an issue with iOS6 for me. I have tried every "workaround" mention here and on stack overflow without success. I am using iScroll with iScrollView on a page that contains multiple input fields and have had the same problem. The only work around that I could find was to override window.scrollTo to prevent scrolling if an input field had focus. Everything worked perfectly after that.

[twilly86]

Hey kappytown, thanks for the update. How did you go about overriding window.onScroll? You would need to detect input focus, then disable, then re-enable once focus is released?

Thanks!

Tom

[kappytown]

I meant to say override window.scrollTo not window.onScroll - sorry.

I will have to update later as I don't have the code in front of me at the moment. Basically, you want to keep a handle on the window.scrollTo method before you override it and, as you mentioned, check if an input field has focus and if so, return else call the old window.scrollTo method. Here is some pseudo code to get your started...

window.oldScrollTo = window.scrollTo;
window.scrollTo = function(){
     if ($('input, textarea, select').is(':focus')) {
          return;
     } else {
          return oldScrollTo.apply(this, arguments);
     }
}

Keep in mind: This is just a temp fix until the actual problem has been solved.

[kappytown]

Still haven't had time to get my code but this should work:

$(document).bind("mobileinit", function() {
     window.oldScrollTo = window.scrollTo;
    window.scrollTo = function(x,y){
        // If a text field has focus, exit
        if ($('input, textarea, select').is(':focus')) {
            return;
        } else {
            return window.oldScrollTo.apply(this, arguments);
        }
    };

    $(document).on("focus", "input,textarea,select", null, function(){
        $(".ui-page:visible .scroll-wrapper").iscrollview("scrollToElement", this, 0);
    });
    $(document).on("blur", "input,textarea,select", null, function(){
        $(".ui-page:visible .scroll-wrapper").iscrollview("scrollToElement", this, 0);
    });
});

[jtara]

This is a long-standing issue with iScroll on iOS. For this reason, ability to use input forms on iOS has never been a claimed feature.

kappytown's fix looks promising, and I'm working on a solution that doesn't coincidently break pages that DONT use iScroll.

An alternative I've considered is to un-enhance the widget on focus, and re-enhance it on loss of focus, but that seems like it would be a performance hit.

See Issue #84 for other popup issues (fixed).

[naginae]

I have the same issue, and i am not using iscroll in my code. while adding suggested solution above and debug it using Chrome i am reciveing following exception, please advice.

[JeanMeche]

I'm having the same problem on iOS7.