Dynamically add a div INSIDE an input field while typing

Question

I am trying to simulate what Zendesk does in their signup form for the subdomain. As the user starts to type a subdomain, it automagically adds ".zendesk.com" in a different color to what the user is typing.

It appears that it's another div that is positioned, but I have no idea how they are positioning it perfectly after the typed input AS the user types.

I'm using jQuery 1.7.

Answer 1

A simple way of doing it would be to have an input at the same position mirror the actual input the user is typing in and just add the string to the end of the value on change.

So you have

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

with

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

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

and the JS is simply

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

Here's a fiddle showing how it could work.