Phonegap + iScroll: solving keyboard issues

First of all, i must say that I'm using iScroll 4.2 with Phonegap 2.1 on an android project (eclipse), but this hack should work with other platforms and versions.

If you tried to click an input field (text box, select, etc) when using iScroll and phonegap, you will find out that you can't. That's because iScroll prevents the default behaviour of your click, making impossible to enter text or select anything.

I found the fix for this at Stack Overflow, however a new problem appears: the keyboard doesn't hide by itself when you put text inside the box!

To fix this, i hacked a bit the code from Stack Overflow. The final result is like this:

Step 1: change this code on iscroll.js :

    onBeforeScrollStart: function (e) { e.preventDefault(); },


and put this:

            onBeforeScrollStart: function (e) {
                var nodeType = e.explicitOriginalTarget ? e.explicitOriginalTarget.nodeName.toLowerCase():(e.target ? e.target.nodeName.toLowerCase():'');
               
                if(nodeType !='select' && nodeType !='option' && nodeType !='input' && nodeType!='textarea' && !showkey) {
                     e.preventDefault();    //prevents showing keyboard - scrolling
                }//otherwise, show keyboard, do default
                if(!showkey) showkey = true;
            },           

Then you must declare the variable "showkey" at the beginning of iscroll.js:

var showkey =true;

Then on your "onblur" events of your inputs you must put:

    <input onblur="showkey=false" .../>

So when you make onblur, the "e.preventDefault()" code can't be executed just one time, making default behaviour (hiding keyboard) possible.