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