Jquery Mobile Form Displays Two Input Areas

Question

I have this weird issue with JQM 1.3, JQ 1.9.1, Android 2-4, and mainly Motorola devices, but can replicat on some HTC.

First let me preface that this code seems to work in most mobile browsers.

The code is in a standard JQM content div, in a page:

<div style="width:80%; max-width:800px; text-align:center;">
    <!-- First Name -->
    <label for="txty" class="ui-hidden-accessible">First Name</label>
    <asp:TextBox ID="txty" runat="server" datafield="FirstName" collectInfo="true" CssClass="" Columns="50" placeholder="First Name"></asp:TextBox>

    <!-- Last Name -->
    <label for="txtx" class="ui-hidden-accessible">Last Name</label>
    <asp:TextBox ID="txtx" runat="server" datafield="LastName" collectInfo="true" CssClass="" Columns="50" placeholder="Last Name"></asp:TextBox>

    ..// more fields

    <!-- BUTTONS -->
    <button data-role="button" id="btnSubmit" name="btnSubmit" data-icon="alert" class="btn"><span>Submit</span></button>
    <button data-role="button" id="clear" name="clear" class="clear btn" data-icon="alert"><span>Clear</span></button>

</div>

---

The results (I am zoomed in so you can see the form):

---

The issue:

** NOTE The page does not display the below error UNLESS a user scrolls and then tries to input text into a texbox **

After a user scrolls and taps on an input, the input displays in two spots...

---

Thanks!

Answer 1

Well after searching for days about this, I posted here and found my answer shortly thereafter.

This is a known issue in the internal Android Browser in Jellybean.

Src: https://code.google.com/p/android/issues/detail?can=2&start=0&num=100&q=&colspec=ID%20Type%20Status%20Owner%20Summary%20Stars&groupby=&sort=&id=30964

There is a workaround with some trade-offs. Such as losing the ability to scroll in text areas, but if you have this issue, then this is a good workaround.

The workaround is to add this to your main CSS file:

/* 
Prevents a bug in Android 4.0-4.1 that duplicates text inputs onFocus ANDROID BUG# 30964
Link to Bug Tracker: http://j.mp/YhydH6
Remove when no longer needed...
*/

input {
-webkit-user-modify: read-write-plaintext-only;
}