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

Here's a fiddle showing how it could work.