Using iScroll prevents the keyboard from showing o

Question

I am using iScroll for providing iPhone style scrolling. But, when clicking on the textboxes, the keyboard does not show up.

While trying to find the possible cause, I found that removing the iScroll script, makes it work normal, but in that case I miss the scrolling functionality.

Is this a bug in iScroll. If yes, is there a tested work-around? Or is there any alternative for iScroll?

Thanks in advance.

Answer 1

I added the following code to _start in iScroll 4.2 to solve this problem:

  if (e && e.target && e.target.tagName) {
    var bFocusField = ('|INPUT|TEXTAREA|BUTTON|SELECT|'
                         .indexOf('|' + e.target.tagName + '|') >= 0);
    if (bFocusField || that.focusField) {
      if (bFocusField) {
        that.focusField = e.target;
      } else {
        that.focusField.blur();
        that.focusField = null;
      }
      e.defaultPrevented = false;
      e.returnValue = true;
      return true;
    }
  }

Code is inserted below the initialization part of the function (that.moved = false; ... that.dirY = 0;).

Tested it on iPad 1 (iOS 5.1) and iPad 3 (iOS 6). The onscreen keyboard does not seem to interfere with iScroll (I do an iScroll.refresh() every 5 seconds).

Answer 2

At least in iScroll 4, you can add this code to enable clicking of input fields. See the demo on Form-fields in the examples folder.

<script type="text/javascript">

var myScroll;
function loaded() {
    myScroll = new iScroll('wrapper', {
        useTransform: false,
        onBeforeScrollStart: function (e) {
            var target = e.target;
            while (target.nodeType != 1) target = target.parentNode;

            if (target.tagName != 'SELECT' && target.tagName != 'INPUT' && target.tagName != 'TEXTAREA')
                e.preventDefault();
        }
    });
}

document.addEventListener('touchmove', function (e) { e.preventDefault(); }, false);
document.addEventListener('DOMContentLoaded', loaded, false);

</script>

Answer 3

I was able to solve the error. The problem was with the CSS.

I thought may be the CSS is somehow creating the problem. I concluded this on the basis that when I commented the CSS for wrapper and scroller, the keyboard showed up... but keeping them, the keyboard didn't work. I was using bottom: 0px;, which seemed to be somehow preventing the keyboard from showing.

Removing bottom: 0px; solved my problem.

Hope this helps others.

Answer 4

I believe this solution is optimal Tweak the code in iscroll.js, ( as follows )

onBeforeScrollStart: function (e) { 
                //e.preventDefault();
                if (e.target.nodeName.toLowerCase() == "select" || e.target.tagName.toLowerCase() == 'input' || e.target.tagName.toLowerCase() == 'textarea'){             
                    return;
                    } 
            },