[jQuery] input, textarea 커서 위치 확인하고 텍스트 감지하기 (selectionStart, selectionEnd, setSelectionRange)

아래 소스 코드는 selectionStart, selectionEnd를 활용하여 textarea 영역 안에서 커서의 위치와 선택한 텍스트를 감지하고 표시하는 예제입니다.

 

selectionStart

텍스트 영역 내에서 선택된 텍스트의 시작 위치(인덱스)를 나타내는 속성입니다.

 

selectionEnd

텍스트 영역 내에서 선택된 텍스트의 끝 위치(인덱스)를 나타내는 속성입니다.

 

setSelectionRange(start, end)

텍스트 영역 내에서 특정 범위의 텍스트를 선택하도록 설정하는 메서드입니다.
start 매개변수는 선택된 텍스트의 시작 위치(인덱스)를 나타내며, end 매개변수는 선택된 텍스트의 끝 위치(인덱스)를 나타냅니다.

 

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<style>
#cursor-position {
  position: absolute;
  padding: 5px;
  background-color: #ffcc00;
  border: 1px solid #333;
}
</style>

<textarea id="my-textarea" rows="10" cols="40" style="resize: none;"></textarea>
<div id="cursor-position"></div>

<script>
$("#my-textarea").on("mouseup keyup", function() {
  var cursorStart = this.selectionStart;
  var cursorEnd = this.selectionEnd;
  var content = $(this).val();

  // 개행 문자 처리
  var lines = content.substr(0, cursorStart).split("\n");
  var line = lines.length;
  var col = lines[lines.length - 1].length + 1;

  var selectedText = content.substring(cursorStart, cursorEnd);

  $("#cursor-position").html("선택 시작: Line " + line + ", Column " + col + "<br>선택 종료: Line " + line + ", Column " + (col + selectedText.length));
  $("#cursor-position").append("<br>선택한 텍스트: " + selectedText.replace(/\n/g, "\\n"));
});
// 이 코드를 사용하여 커서를 특정 위치로 설정할 수도 있습니다.
// $("#my-textarea").on("click", function() {
//   this.setSelectionRange(5, 10);
// });
</script>

 

 

간단한 소스이니 확인해보시고 테스트하시면 됩니다.

 

소스코드 결과