TextArea의 원하는 위치에 원하는 텍스트를 입력할 수 있을까? 인터넷 익스플로러 4 이상을 사용하고 있다면 그리 어려운 일이 아니다. 간단한 예제를 먼저 살펴 보자.

아래 TextArea에서 대치시키고 싶은 문자열을 선택하거나 삽입시키고 싶은 위치에 커서를 위치시킨 후 삽입시킬 텍스트를 적절히 변경한 다음 "텍스트 삽입" 버튼을 클릭해 보기 바란다.

위 결과에 대한 소스 코드는 다음과 같다.

위의 소스코드를 보면 알겠지만 TextArea에 커서를 위치시키거나 문자열을 선택하면 해당 위치 또는 선택한 문자열을 저장하기 위해 saveCurrentPos란 함수를 호출한다. 이 함수에서 document.selection.createRange().duplicate(); 부분이 핵심이다. duplicate()은 TextRange객체의 복사본을 만들어 준다. 즉, 사용자가 선택한 위치의 문자열에 해당하는 TextRange 객체를 만들어 준다. 만일 TextArea의 문자열을 선택하지 않은 채 커서만 적절한 위치에 위치시켰다면 duplicate은 빈 문자열의 TextRange 객체를 반환할 것이고 TextArea의 적절한 문자열을 선택한 다음 duplicate을 호출했다면 해당 문자열을 가지고 있는 TextRange객체를 반환할 것이다. 이렇게 해서 생성한 복사본 객체(여기서는 objTextArea.currentPos에 저장)의 text 값을 사용자가 입력한 문자열(this.form.myText.value)로 대치시키면 모든게 끝난다.

다시 한번 정리하면, TextArea의 전체 문자열 중 사용자가 커서를 위치 시킨 곳의 특정 문자열(빈 문자열일 수도 있고 사용자가 선택한 문자열일 수도 있고)을 별도의 객체로 떼어낸 후(duplicate 메쏘드 사용) 떼어낸 객체의 text 속성(TextRange객체의 속성임)을 사용자가 입력한 문자열로 대치시키면 자동으로 TextArea의 문자열에 반영이 되는 것이다.

조금 복잡할 수도 있지만 잘 생각하면 그 원리를 깨달을 수 있을 것이다.