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

Question

我想在输入的开头放一个冒号，如下所示：

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

Answer 1

这可以通过多种方式完成，只需使用纯 CSS，甚至不会干扰 Javascript。背景图像和伪元素浮现在我的脑海中。

我已经玩过并提出了这个。

http://jsfiddle.net/q5DZP/

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

Answer 2

工作 jsFiddle 演示

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

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;
}