출처 : http://blog.outsider.ne.kr/556
<input type="text"/> 엘레먼트에 입력된 텍스트에 대해서 커서를 이동시킬 수 있는 소스코드입니다.
이 소스코드를 통해서 커서를 이동시킬 수 있고, 특정 구간의 문자열을 선택(혹은 블록-Block)할 수 있습니다.
아래 소스코드는 jQuery 객체에 selectRange() 라는 메소드를 추가하여 사용하는 방식입니다.
$.fn.selectRange = function(start, ent) {
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>에서도 사용할 수 있습니다.
'IT 스터디 > HTML' 카테고리의 다른 글
| 부모창의 데이터 업데이트 하기 (0) | 2016.03.11 |
|---|---|
| jQuery Mobile 스크롤러 이벤트, 마지막에 부분에 닿았을때 서버에서 데이터 가져오기 (0) | 2015.06.12 |
| 모바일 크기에 맞게 이미지 조정 (0) | 2015.06.10 |