在键入时动态添加div INSIDE输入字段

Question

我正在尝试模拟Zendesk在子域的注册表单中所做的事情。当用户开始键入子域时，它会自动将“.zendesk.com”添加为用户输入的不同颜色。

看起来它是另一个定位的div，但我不知道在用户输入的类型输入后它们是如何完美定位的。

我正在使用jQuery 1.7。

Answer 1

这样做的一个简单方法是在同一位置输入一个镜像用户输入的实际输入，然后在变化时将字符串添加到值的末尾。

所以你有

<input class="mirrorInput" disabled="disabled"></input>
<input class="realInput"></input>​

与

.realInput{
    position: absolute;
    left: 0;
    background: none;
}

.mirrorInput{
    position: absolute;
    left: 0;
    color: green;
    background: white;
}

而JS只是

$(".realInput").on("keyup", function(event){
    $(".mirrorInput").val($(".realInput").val() + ".zendesk.com");
})

Here's a fiddle showing how it could work.