javascript - 从 jQuery Mobile 1.2.0 升级到 1.3.1 会破坏输入框

Question

我正在尝试在 Windows Phone 8 的 PhoneGap 应用程序上使用 jQuery Mobile。

目前，该应用程序使用运行良好的 jQuery Mobile 1.2.0 (jquery.mobile-1.2.0.min)。但是，在 1.3.0 中引入了转换支持，因此我打算升级到它。但是，当我更新到 jQuery Mobile 1.3.1 (jquery.mobile-1.3.1.min) 时，输入框无法像以前那样呈现。

我不是 HTML 开发人员所以我知道的不多，原始代码不是我写的。下面是输入框的代码:

        <label for="lumpsum">Current lump sum savings, if any ($)</label>
    <input type="number"  pattern="[0-9]*" name="lumpsum" id="lumpsum" value="2000"  style="width:50%" required/><br>

区别:-

如果需要任何其他信息，请告诉我。

Answer 1

我访问了http://view.jquerymobile.com/1.3.1/demos/widgets/textinputs/ ，然后右键单击并在 Google Chrome 浏览器的“文本输入:”字段中选择“检查元素”，以便显示开发人员工具分屏。在这里您可以看到您的原始 html 加上 jQuery Mobile 3 脚本添加的 html。

jQuery Mobile 3 似乎包装了您的 <input> <div> 中的元素具有 css 样式类的元素 ui-input-text .这div元素由 jQuery Mobile 3 设置样式为 100% width ，如开发人员工具屏幕的右半部分所示。这会导致文本输入字段比您想要的更宽。

一种可能的解决方案:

在<input>元素，删除 style="width:50%"

将此 css 添加到您的 html 文件中:

div.ui-input-text {
    width: 50%;      /* desired text input field width */
    margin: 0 auto;  /* center element */
    clear: both;     /* no other elements beside this one */
}

不过要小心，更改 div.ui-input-text 中的宽度类更改所有输入文本字段的宽度。如果您只想更改此特定 <form> 上文本输入字段的宽度，您可以添加到 <form>一个唯一的 ID，例如<form id="uniqueid"> .现在在你的 CSS 中，这个特殊的形式可以被设计成这样:

form#uniqueid div.ui-input-text {
    width: 50%;      /* desired text input field width */
    margin: 0 auto;  /* center element */
    clear: both;     /* no other elements beside this one */
}