在輸入字段時動態添加一個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.