jQuery Mobile的形式显示两个输入区 [英] Jquery Mobile Form Displays Two Input Areas

问题描述

我有JQM 1.3，JQ 1.9.1，Android的2-4，主要摩托罗拉设备这个奇怪的问题，但可以在一些HTC replicat。

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.

首先让我preface这code似乎在大多数移动浏览器。

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

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

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

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

谢谢！

推荐答案

这个搜索天好吧，我在这里贴，发现我的答案之后不久。

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

这是在杰利贝恩内部Android浏览器的已知问题。

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

的Src：
<一href=\"https://$c$c.google.com/p/android/issues/detail?can=2&start=0&num=100&q=&colspec=ID%20Type%20Status%20Owner%20Summary%20Stars&groupby=&sort=&id=30964\" rel=\"nofollow\">https://$c$c.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.

解决方法是将它添加到你的主CSS文件：

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

这篇关于jQuery Mobile的形式显示两个输入区的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！