从 jQuery Mobile 1.2.0 升级到 1.3.1 会破坏输入框答案

【问题标题】：Upgrade from jQuery Mobile 1.2.0 to 1.3.1 breaks input boxes从 jQuery Mobile 1.2.0 升级到 1.3.1 会破坏输入框
【发布时间】：2013-04-19 15:10:57
【问题描述】：

我正在尝试在 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>

区别：-

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

【问题讨论】：

如果它破坏了你是否有理由更新？
我正在更新以支持 Windows Phone 上的页面转换。

标签： javascript css html jquery-mobile

【解决方案1】：

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

jQuery Mobile 3 似乎将您的 <input> 元素包装在一个带有 css 样式类 ui-input-text 的 <div> 元素中。这个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 */
}

【讨论】：