Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    primarykey
    data
    text
    <p>So iScroll + Android + Form fields don't seem to work well together. I've faced some nasty issues with textbox disappearing, not working properly, keyboards moving the whole page up. Weird stuff. </p> <p>We solved it by setting <code>stopPropagation</code> on <code>touchstart</code> on every single textbox/selects/form fields, and it solved our issue. </p> <pre><code>var selectField = document.getElementById('textbox'); selectField.addEventListener('touchstart', function(e) { e.stopPropagation(); //updateScrollPosition(this, true); }, false); </code></pre> <p><strong>EDIT</strong></p> <p>The other workaround I can think about is to override onBeforeScrollStart to prevent scrolling when the touch happens in selected elements(inputs, selects and textAreas were the issue here but you can target anything):</p> <pre><code>iScroll.options.onBeforeScrollStart = function(e) { var target = e.target; while (target.nodeType != 1) target = target.parentNode; if (target.tagName != 'SELECT' &amp;&amp; target.tagName != 'INPUT' &amp;&amp; target.tagName != 'TEXTAREA'){ e.preventDefault(); }}; } </code></pre> <p><strong>EDIT 2</strong></p> <p>So neither of the above helped. The same happened to me a while back so I came up with a (horrible) hack to solve that issue. I can't share this piece of code(oh licenses!) but the steps I did were: </p> <ul> <li>Check if it's android, and the version is lower than 3.0</li> <li>Hide your input and replace with a div</li> <li>When you click on the div, run a native bit layer that triggers a click on a hidden EditText</li> <li>Add a textChangeListener and copy everything to your div and to your input.</li> <li>Get really pissed that's the best solution you found and repeatedly bang your keyboard on the desk.</li> </ul>
    singulars
    1. This table or related slice is empty.
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload