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

출처 : Outsider's Dev Story https://blog.outsider.ne.kr/

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

JavaScript

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17

$.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에서는 테스트 해보지 않았지만 그 외의 브라우저에서는 잘 동작합니다.