div를 동적으로 추가 입력시 INSIDE 입력

Question

Zendesk이 서브 도메인에 대한 가입 양식에서 수행하는 작업을 시뮬레이션하려고합니다. 사용자가 하위 도메인을 입력하기 시작하면 사용자가 입력하는 것과 다른 색상의 ".zendesk.com"이 자동으로 추가됩니다.

다른 div가 배치 된 것처럼 보입니다.하지만 사용자 유형에 따라 입력 된 내용을 완벽하게 배치 한 방법을 알 수 없습니다.

jQuery 1.7을 사용하고 있습니다.

Answer 1

간단한 방법은 사용자가 입력하는 실제 입력을 동일한 위치에 입력하고 변경시 값 끝에 문자열을 추가하는 것입니다.

그래서 당신은

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

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

와

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

이 있고 JS는 자신의 페이지 또는 코드를 보지 않고 단순히

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

Here's a fiddle showing how it could work.