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

by

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

More Related Contents:

  1. Detect a finger swipe through JavaScript on the iPhone and Android
  2. Detecting touch screen devices with Javascript
  3. Javascript for “Add to Home Screen” on iPhone?
  4. Fixed positioning in Mobile Safari
  5. How to detect a long touch pressure with javascript for android and iphone?
  6. Is there any way to use window.onbeforeunload on Mobile Safari for iOS devices?
  7. Invoke native date picker from web-app on iOS/Android
  8. How to detect in iOS webapp when switching back to Safari from background?
  9. Preventing default context menu on longpress / longclick in mobile Safari (iPad / iPhone)
  10. Strange behavior of select/dropdown’s onchange() JS event when using ‘Next’ on Mobile Safari Dropdown list item select box
  11. Determine if user navigated from mobile Safari
  12. Available iPhone Web Application JavaScript UI Library/Frameworks
  13. Javascript date parsing on Iphone
  14. Can I prevent phone from sleep on a webpage
  15. How to detect if web app running standalone on Chrome mobile
  16. What happens to JavaScript code after app is compiled using Titanium Mobile
  17. Is it possible, in JavaScript, to detect when the screen is turned off in the Android & iOS browsers
  18. How to implement an onmousedown and onmouseup on an iPhone touch screen
  19. what all the main differences in cordova and phonegap [closed]
  20. Check if URL scheme is supported in javascript
  21. Prevent Address-Bar hiding in mobile Browsers
  22. Position fixed not working in mobile browser
  23. Why can’t JavaScript .play() audio files on iPhone safari?
  24. Open android application from a web page
  25. screen styling when virtual keyboard is active
  26. WebView methods on same thread error
  27. Facebook OAuth “Unsupported” in Chrome on iOS
  28. React-Native assembleRelease fails for task ‘:app:bundleReleaseJsAndAssets’
  29. No sound on iOS 6 Web Audio API
  30. Android Phonegap – How to Open Native Google Maps Application

Leave a Comment