Jquery - 具有两个不可编辑的值的文本框

Question

原创设计：

期望的设计：

我希望文本框具有预定义字符SD，用户可以添加其他字符或数字。但SD不能删除也不能编辑。可能吗？

提前致谢

Answer 1

你可以这样解决

<div style="position:relative">
    <input type="text" style="padding-left:25px" />
    <span style="position: absolute; padding: 3px 0; left: 5px">SD</span>
</div>

不要忘记更改填充和左侧值以适合您的字体和大小。

Answer 2

您可以尝试使用两个输入并删除左/右边框。我刚创建的快速解决方案可能如下所示：

CSS：

input {
    border: 1px solid black;
}
input[readonly] {
    border-right: 0;
    width: 20px;
}
input:not([readonly]) {
    border-left: 0;
}

HTML：

<input type="text" value="SD" readonly="readonly"><input type="number" value="123">

演示：http://dabblet.com/gist/9593231

您可以根据自己的整体设计进行调整。