如何处理两种输入框？

Question

如何创建一个输入框，其中包含2个部分，第1部分不能使用默认文本进行编辑，其余部分可由用户编辑。

<input type='text' value='read only'><input type='text' value='editable>

在1个输入中混合2个输入。

Answer 1

你可以尝试将两个输入看作是@DoeNietZoMoeilijk建议的那样。

你可以通过HTML和CSS实现它，试试这个：

HTML：

<input type="text" value="Read only" id="first" readonly="readonly" />
<input type="text" value="Editable" id="second" />

CSS：

#first {
    border-right: none;
}

#second {
    border-left: none;
    margin-left: -5px;
}

Here is example in jsfiddle

以下是示例摘录：

#first {
    border-right: none;
}

#second {
    border-left: none;
    margin-left: -5px;
}

<input type="text" value="This is read only part" id="first" readonly="readonly" />
<input type="text" value="Editable" id="second" />

  

Answer 2

当然，你不能在一个输入中真正混合两个输入，但是使用CSS你应该能够使两个输入看起来像一样。在第一个输入上设置readonly attribute会将其呈现为......好，只读。