Outsider's Dev Story

Stay Hungry. Stay Foolish. Don't Be Satisfied.
RetroTech 팟캐스트 44BITS 팟캐스트

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

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


$.fn.selectRange = function(start, end) {
    return this.each(function() {
         if(this.setSelectionRange) {
             this.focus();
             this.setSelectionRange(start, end);
         } else if(this.createTextRange) {
             var range = this.createTextRange();
             range.collapse(true);
             range.moveEnd('character', end);
             range.moveStart('character', start);
             range.select();
         }
     });
 }; 

// use like this 
$('#elem').selectRange(3,5);

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

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