从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>元素包含在带有css样式类<div>的{​​{1}}元素中。这个ui-input-text元素由jQuery Mobile 3设置为100％div，如开发人员工具屏幕的右半部分所示。这会导致文本输入字段比您想要的更宽。

一种可能的解决方案：

在width元素中，移除<input>

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

style="width:50%"

但请注意，更改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>添加为唯一ID，例如<form>。现在在你的css中，这个特定的形式可以设置为：

<form id="uniqueid">