0

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

区别：- 1.2.0 1.3.1

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

4

1 回答 1

2

我访问了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 */
}
于 2013-04-19T07:02:25.857 回答