如何使用javascript输入一个无法删除输入开始时的字符

Question

我想在输入的开头添加冒号，如下所示：

无法删除。 我想可以使用标签来放置它，然后用css来定位它，对吗？ 如何使用javascript来做到这一点？ 顺便说一句，我使用shift +：来显示这个输入，但是当我使用脚本来聚焦它时，冒号自动输入，如何删除？

Answer 1

这可以通过多种方式完成，只需要纯CSS，甚至不会打扰Javascript。我想到了背景图片和伪元素。

我已经玩过了并且出来了。

http://jsfiddle.net/q5DZP/

请注意，input元素必须包含在div（或任何其他容器元素）中，否则:before或:after伪元素将不适用。

Answer 2

<强> Working jsFiddle Demo

您可以使用多个图层和定位执行此操作：

HTML

<div id="container">
    <input id="input" type="text" />
    <div id="colon">:</div>
</div>

CSS

#container {
    position: relative;
    width: 300px;
    height: 50px;
}

#input {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border: 3px solid black;
    border-radius: 5px;
    background: #ccc;
    font-size: 18px;
    padding-left: 20px;
}

#colon {
    position: absolute;
    top: 13px;
    left: 15px;
    font-size: 18px;
}