jQuery移動表單組合輸入元素

Question

使用jQuery移動時，是否可以將複選框或按鈕與文本輸入組合？類似於下面的圖片。

我想使用它作爲字段驗證，所以當用戶更新字段時它會變成紅色或綠色。

Answer 1

jQuery Mobile的不包括，但你可以通過CSS做到這一點。

這裏是一個DEMO有幾個選項

第一個使用表，所以左邊的按鈕始終是相同的大小和輸入的增長/收縮的窗口大小調整。而第二個選項使用div和bothe按鈕並且標籤變大縮小。

在表格中，css刪除表格上的邊框和間距，並將第一個td寬度設置爲常量值。其餘的css使按鈕和輸入看起來正確：

<table id="specialContTbl"> 
    <tr> 
    <td class="btntd"> 
     <button data-role="none" id="btn">B</button> 
    </td> 
    <td class="inptd"> 
     <input data-role="none" type="text" id="inp1" name="inp1" value="" placeholder="enter some text" /> 
    </td> 
    </tr> 
</table> 

#specialContTbl { 
    border-spacing: 0; 
    border-collapse: collapsed; 
} 
#specialContTbl td { 
    padding:0; 
    margin: 0; 
    border: 0; 
    vertical-align: top; 
} 
#specialContTbl td:first-child{ 
    width: 60px; 
} 
#specialContTbl{ 
    width: 100%; 
} 
#specialContTbl button, #specialContTbl input { 
    -webkit-box-sizing: border-box; 
    -moz-box-sizing: border-box; 
    box-sizing: border-box; 
} 
#specialContTbl button { 
    font-weight: normal; 
    background: #00f050; 
    padding: 5px; 
    color: #333; 
    border: 1px solid #d4d4d4; 
    border-right: 0; 
    border-bottom-left-radius:1em; 
    border-top-left-radius: 1em;  
    line-height: 28px; 
    height: 38px; 
    width: 100%; 
    float: left; 
    text-align: center; 
    cursor: pointer; 
    white-space:nowrap; 
} 
#specialContTbl input { 
    width: 100%; 
    height: 38px; 
    padding: 8px; 
    border: 1px solid #d4d4d4; 
    border-bottom-right-radius: 1em; 
    border-top-right-radius: 1em; 
    line-height: 18px; 
    float: right; 
    box-shadow: inset 0px 2px 2px #ececec; 
} 
#specialContTbl input:focus { 
    outline: 0; 
}