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