从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似乎使用css样式类ui-input-text将<input>元素包装在<div>元素中。 这个div元素由jQuery Mobile 3设计为100％ width ，可以在Developer Tools屏幕的右半部分看到。 这会导致文本输入字段比您想要的更宽。

一种可能的方案：

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