jquery - 読み取り専用で編集可能な部分を備えたHTML5テキストコントロール

Question

単一に見えるが、2つの部分が水平に配置され、動作が異なるテキスト入力ビジュアル要素を取得しようとしています。左から1つは読み取り専用で、左から1つは編集可能である必要があります。

これをどのように行うことができるかについての提案はありますか？

Answer 1

2つの入力を並べて配置し、適切にスタイルを設定できます。http://jsfiddle.net/xvKCH/1/のjsfiddleの例。

<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;
}​