Get iscroll to work with form fields

[hellogerard]

Hello,

Thanks for the great plugin. Really wanted to use this plugin, but the breaking of form was a dealbreaker for us, so I came up with the changes in this pull request. This change is related to this issue: #13. Simply detects what's being touched and returns if a form input element.

Thanks again,
Gerard

[jstreb]

Thanks hellogerard! Your fix worked great for me.

[jitendravyas]

It's still not working properly. Select dropdown flashing upon focus in iphone see here http://jsbin.com/unese4/8

[Savageman]

Working great on Android for me! Didn't have problems on iPhone before.

Thanks a lot hellogerard, you rock! ;)

[bengourley]

Until the author sorts out form elements (he says: "The followings are known issues I’m currently working on: Form fields compatibility" etc.., so hopefully we can look forward a nice solution), here is a quick and dirty way around the android flashing issues:

On line 135 of iscroll.js:

if (e.target.tagName == "INPUT") {
    return;
}

(Add other tag names if required)

And in the place where you initialise iScroll:
var myScroll;

function init() {
  // Initialise iScroll here with your desired settings
}

$("#your-form-selector").bind('click', function (e) {
  e.preventDefault();
  e.bubble = false;
  return false;
}).bind('focus', function (e) {
  e.preventDefault();
  e.bubble = false;
  myScroll.destroy();
  myScroll = null;
}).bind('blur', init);

[connor]

I was having an issue with s and this did the trick! thank you for this fix!

[cubiq]

This should already work. Look at form fields example

[deepsweet]

still doesn't work without, v4.1.5:

if (e.target.tagName == 'SELECT') {
    return;
}

[duveborg]

Is it fixed?

[matthew-dean]

Nope. This is still broken. Can't get my form fields to receive focus in Google Chrome. :-(

[strunkandwhite]

hellogerard's fix works for me, at least in FF/Chrome/Safari.

[jitendravyas]

What is the status for the solution of this problem?

[emilevictorportenart]

I just add the button and it works fine now ! thanks !!!

if (target.tagName != 'SELECT' && target.tagName != 'INPUT' && target.tagName != 'TEXTAREA' && target.tagName != 'BUTTON')

[alicanbatur]

Hi, first find this lines

        if (this.options.preventDefault && !utils.isAndroidBrowser) {

            e.preventDefault();     // This seems to break default Android browser
        }

and then add this code above e.preventDefault();

        if (e.target.tagName == "SELECT" || e.target.tagName == "INPUT"
                || e.target.tagName == "BUTTON" || e.target.tagName == "TEXTAREA") {
                return true;
        }

finally it should seems like :

        if (this.options.preventDefault && !utils.isAndroidBrowser) {

            if (e.target.tagName == "SELECT" || e.target.tagName == "INPUT"
                || e.target.tagName == "BUTTON" || e.target.tagName == "TEXTAREA") {
                return true;
            }

            e.preventDefault();     // This seems to break default Android browser
        }

this works for me. Hope u'll fix it.

[mknarwade]

In iScroll.js version 5.2.0
line no. 1653 add one condition && !e.target.tagName=="INPUT"
fix the issue for input type "datetime-local"