1

In my jquery mobile ios phonegap application, i use iscroll. On using iscroll, text boxes behave weirdly (move up and down on entering each character).

I enabled iscroll in my app by,

Added following scripts:

 <script src="js/iscroll.js"></script>
 <script src="js/jquery.mobile.iscrollview.js"></script>

My page looks like,

 <div data-role="page" id="index">
    <div data-theme="a" data-role="header" data-position="fixed" data-id="footer" data-tap-toggle="false" data-transition="none">
    </div>
    <div data-role="content" data-iscroll>
      // following text field works weirdly 
      <input id="txtComment" placeholder="COMMENTS" value="" type="text" data-theme="b"/>  

    </div>
    <div data-role="navbar" data-position="fixed" data-theme="a" data-id="footer" data-tap-toggle="false" data-transition="none">
    </div>
 </div>

I tried adding the following code, but didn't work

 var selectField = document.getElementById('txtComment');
 selectField.addEventListener('touchstart', function(e) {
      e.stopPropagation();
 }, false);

How can i fix it?

Please help.

Omar
  • 32,302
  • 9
  • 69
  • 112
Erma Isabel
  • 2,167
  • 8
  • 34
  • 64

3 Answers3

1

Use this function with iscroll you can type in form fields.....

<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>
Joe
  • 15,205
  • 8
  • 49
  • 56
Ranjit
  • 106
  • 1
  • 2
  • 11
  • Actually i am using data-iscroll in the content div, data-tap-toggle="false" data-transition="none" in header for making header fixed. iscroll is inintialising in the content div (not like you mentioned). – Erma Isabel Aug 26 '13 at 08:09
0

Try:

in the Android Manifest activity: android:windowSoftInputMode = "adjustNothing"

TorchMan
  • 274
  • 3
  • 12
0

same problem raised for me.just refresh your scroll using

setTimeout(function () { myScroll.refresh(); }, 1000);

by adding refresh at correct place you can overcome this problem.i have gone through many websites and tried a lot.its work me perfectly.

if it doesn't works then its Mobile version(android,ios) problem because scroll deosn't support. hope it will helps u.

Prabakaran G
  • 83
  • 1
  • 13