jquery - 键入时在输入字段内动态添加 div

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

这是一个小提琴，展示了它是如何工作的。