Jquery Mobile Form 显示两个输入区域

Question

我在使用 JQM 1.3、JQ 1.9.1、Android 2-4 和主要是摩托罗拉设备时遇到了这个奇怪的问题，但可以在某些 HTC 上复制。

首先让我先说明一下，这段代码似乎适用于大多数移动浏览器。

代码在一个标准的 JQM 内容 div 中，在一个页面中：

<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>

---

结果（我放大了，所以你可以看到表格）：

---

问题：

** 注意页面不显示以下错误除非用户滚动然后尝试将文本输入到 texbox **

用户滚动并点击输入后，输入显示在两个位置...

---

谢谢！

Answer 1

好吧，在搜索了几天后，我在此处发布并在此后不久找到了答案。

这是 Jellybean 内部 Android 浏览器中的一个已知问题。

来源： 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

有一些权衡取舍的解决方法。比如失去在文本区域中滚动的能力，但如果你有这个问题，那么这是一个很好的解决方法。

解决方法是将其添加到您的主 CSS 文件中：

/* 
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;
}