Iscroll 4 Not Working with Form <Select> Element iPhone Safari and Android Browser

iScroll 4 not working with form select element iPhone Safari and Android browser

The problem is that iScroll cancels the default behavior of your select tag (Not a very good implementation if you ask me).

This occurs in the _start() function on line 195:

e.preventDefault();

If you comment that out you'll notice the select tag works again.

But commenting it out means you've hacked the library which might break other desirable iScroll functionality. So here's a better workaround:

var selectField = document.getElementById('Field10');
selectField.addEventListener('touchstart' /*'mousedown'*/, function(e) {
    e.stopPropagation();
}, false);

That code will allow the default behavior to occur, without propagating the event to iScroll where it screws everything up.

Since your JS is not inside any jQuery-like onReady() event, you'll have to make sure to you put this code AFTER the HTML where your select elements are defined.

Note that for mobile devices the event is touchstart, but for your PC browser it will be mousedown

select box not working with iscroll4

You just need to change this line in the loader of the iscroll:

Change this line:

myScroll = new iScroll('wrapper');

For this:

myScroll = new iScroll('wrapper', {
useTransform: true,
zoom: 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();
   }
});

iScroll won't let items be clicked

The author has commented that form compatibility is glitchy - it's a known issue and he's working on a fix for the next version. Someone else has commented in the forums:

As of v4.1.9, support for form fields is still under development. You
can make radio buttons and checkboxes work by wrapping in a label
(wrapping seems to work better possibly than using for="" syntax).

Links should be fine and work in the demos provided. You've commented out the e.preventDefault() call in your init script which is the usual culprit. Maybe the form compatibility issue is affecting links also?

As for the hover event, from what I can tell this should be activated when an element is tapped.

Hope that helps a little. Worst case scenario - scrap your code and start with a demo page from the project, adapt to your needs one line at a time and keep testing it. You'll soon know which modification breaks the intended behaviour.

iScroll 4 not scrolling on input elements

I had exactly the same problem and used the following when I set up my iScroll:

var ISCROLL_MOVE;

var ISCROLL_MOVE_LIMIT=10;

// ... functions to include when you set up your iScroll
onScrollStart: function(e) {
                ISCROLL_MOVE=0;
            },
            onScrollMove: function(e) {
                ISCROLL_MOVE_LIMIT++;
            }

Then when you have any form elements in your iScroll, e.g.:

var selectField = document.getElementById('mySelectField');

selectField.addEventListener('touchend' /*'mousedown'*/, function(e) {

        if (SCROLL_MOVE<SCROLL_MOVE_LIMIT)
            this.focus();

    }, false);

Note the action is on a touch end event, and it allows for scrolling iScroll pages when the user touches on a form element - basically it measures the amount of scrolling ( or not ) which the user is making ( the amount of SCROLL_MOVE ). If its more than 10 ( the SCROLL_MOVE_LIMIT seems like a good number to me ) then the field won't grab focus , otherwise it will.

Let me know if you need more detail.

iscroll is not working properly for dynamic form in phonegap

so a couple of things that will be helpful -
define your myScroll variable outside of your loaded function that way you can access it anywhere.

also after your content has loaded call myScroll.refresh() and have at least a 1ms delay on it. little hack that goes a long way.

Selection option in PhoneGap not working proper

check out this iScroll 4 not working with form <select> element iPhone Safari and Android browser

i was facing the same issue. worked for me. just a small change. instead of doing for select tag, do for all the tags for which u face the issue.

---

Related Topics