Question

As the title says, the following combination in a html will make the input fields nearly unusable on an android 4 phone:

<ul><li><input placeholder="field1" type="text"></li>
<li><input placeholder="field2" type="text"></li></ul>
<input><input><input><!-- many more 'input' elements for an extreme result-->

So basically we have 2 input fields in a list, the ones I want to work and more input fields which aren’t in the list.
Result:

Click field 1 (cursor moves there after a large lag)

Enter some text and click field 2. (again a lag when cursor moves).

Click field 1 again and enter text while the cursor isn’t in field 1 yet. The text is added to the already existing text on the left instead of the right (as if you would wait until the cursor moved).

Repeat the step of entering text while a clicked input field isn’t active yet.

Depending on how many input fields were added below the first 2 the screen can suddenly be all black, or text is displayed in the wrong field, or no text is displayed in one of the fields where text was entered before.

This seems like a major bug that occurs only on Android 4 as stated above. Did anyone else experience this too? Is there maybe some work around without changing the code fundamentally? The way it is implemented is a “little” more complex which makes it extremly difficult to change it.
Thanks for any help, experience reports, etc.

Answer 1

We finally figured out the problem.
It is overall just a performance problem which is caused by the browser trying to autocomplete the fields. He searches in some databases or does whatever, which causes it to lag and create this problems.

The solution is about as simple as it possibly can be:

<form action="" method="post" autocomplete="off">

So its just about adding the attribute autocomplete=”off”

I hope this helps maybe some other people…