帶有隻讀和可編輯部分的HTML5文本控件

Question

我試圖獲得一個文本輸入可視元素，它看起來很單一，但是有兩個部分水平排列，具有不同的行爲。從左邊的那個必須是隻讀的，而左邊的應該是可編輯的。

任何有關如何做到這一點的建議？

Answer 1

您可以將兩個輸入放在一起並恰當地設置它們的樣式。示例jsfiddle在http://jsfiddle.net/xvKCH/1/。

<input type='text' readonly class='readonly'></input><input type='text' class='writable'></input>​ 

input { 
    display: inline; 
    width: 100px; 
    margin: 0; 
    padding: 0; 
    border: 1px solid black;  
} 

.readonly { 
    border-right: 0; 
} 

.writable { 
    border-left: 0; 
}​