html - 如何处理两种类型的输入框？

Question

如何创建一个包含两部分的输入框，第一部分不可使用默认文本编辑，其余部分可由用户编辑。

<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" />