input [type=text]의 text에 있는 커서 이동하기

요즘 재미삼아 만지고 있는 거에서 input [type=text]에 있는 문자열의 커서를 이동시켜야할 필요가 있었습니다. 커서를 다뤄본 적은 별로 없어서 검색을 했더니 역시나 좋은 예제를 Stackoverflow에서 찾을 수 있었습니다.

 1$.fn.selectRange = function(start, end) {
 2    return this.each(function() {
 3         if(this.setSelectionRange) {
 4             this.focus();
 5             this.setSelectionRange(start, end);
 6         } else if(this.createTextRange) {
 7             var range = this.createTextRange();
 8             range.collapse(true);
 9             range.moveEnd('character', end);
10             range.moveStart('character', start);
11             range.select();
12         }
13     });
14 };
15
16// use like this
17$('#elem').selectRange(3,5);

위 함수는 jQuery에서 사용할 수 있도록 한 것이고 jQuery를 쓰지 않는다면 따로 함수로 정의해서 타겟이 되는 엘리먼트도 아규먼트로 넘겨주어야 합니다. 이름에도 알 수 있듯이 이 함수는 문자열의 원하는 범위의 text를 선택하는 코드입니다. 단순히 커서의 위치를 이동하고자 한다면 start와 end 파라미터를 동일한 값으로 지정하면 됩니다.

IE6,7에서는 테스트 해보지 않았지만 그 외의 브라우저에서는 잘 동작합니다.