jquery - 入力中に入力フィールド内にdivを動的に追加する

Question

Zendeskがサブドメインのサインアップフォームで行うことをシミュレートしようとしています。ユーザーがサブドメインの入力を開始すると、ユーザーが入力しているものとは異なる色で「.zendesk.com」が自動的に追加されます。

配置されているのは別のdivのようですが、ユーザーが入力した入力の後に、どのように完全に配置されているのかわかりません。

私はjQuery1.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");
})

これがどのように機能するかを示すフィドルです。