출처 : http://blog.outsider.ne.kr/556
<input type="text"/> 엘레먼트에 입력된 텍스트에 대해서 커서를 이동시킬 수 있는 소스코드입니다. 이 소스코드를 통해서 커서를 이동시킬 수 있고, 특정 구간의 문자열을 선택(혹은 블록-Block)할 수 있습니다.
아래 소스코드는 jQuery 객체에 selectRange() 라는 메소드를 추가하여 사용하는 방식입니다.
$.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();
}
});
};
//사용형식
$(input_object).selectRange(선택시작위치,선택끝위치);
사용예시를 보겠습니다.
<html>
<head>
<script type="text/javascript" src="jquery-1.9.1.js"></script>
<script type="text/javascript">
$.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();
}
});
};
$(window.document).ready(function(){
//특정 영역을 선택
$("input").selectRange(2,5);
});
</script>
</head>
<body>
<input type="text" value="1234567890" />
</body>
</html>
위와 같이 작성하게 되면 아래와 같이 됩니다.
만약 특정 위치로 커서를 설정하고 싶다면 selectRange() 메소드의 두 파라미터의 값을 동일하게 맞춰주면 됩니다.
//특정 위치로 커서 이동
$("input").selectRange(3,3);
3이라는 값이 파라미터로 전달되었기 때문에 3번째 위치에 커서가 이동한 것을 보실 수 있습니다. 이처럼 setRange() 메소드를 통해서 특정 구간을 선택하거나 커서의 위치를 이동시킬 수 있습니다.
그리고 참고로 <input type="text"/> 뿐만 아니라 <textarea></textarea> 에도 사용할 수 있습니다. 이점 참고바랍니다.
'jQuery' 카테고리의 다른 글
| (jQuery) 팝업창 위치를 자동으로 중앙(가운데) 위치시키기 (0) | 2014.09.18 |
|---|---|
| (작성중) 마우스 영역 (0) | 2014.08.20 |
| jQuery 워터마크 삽입 소스코드 (0) | 2014.07.17 |
| jQuery 이미지 사이즈 자동 조절(제한) (0) | 2014.01.28 |
| jQuery 마우스 포인터 위치 구하기 (0) | 2013.09.30 |