jquery - 具有只读和可编辑部分的 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;
}​