[JS] input이나 textarea에서 커서 위치 확인하기

가끔은 입력하다보면 내 커서 위치를 구해야 할 일이 생길 수도 있다.

그리고 커서 위치를 알아두면 좀 더 자유롭게 단축키로 여기저기 왔다갔다 할 수도 있게 된다.

또는 특정 문자열의 위치로 커서를 변경할 수도 있다.

---

const inputTextarea = document.getElementById('inputTextarea');

console.log(inputTextarea.selectionStart); // 커서의 시작 위치
console.log(inputTextarea.selectionEnd); // 커서의 끝 위치

만약 커서를 옮길 때 selectionStart값만 변경하게 되면 드래그가 발생하게 된다.

그래서 드래그를 의도한 것이 아니라면 selectionEnd값도 옮겨주어야 한다.

 

또한, 입력할 때마다 커서의 위치를 구하고 싶다면 addEventListener을 하면 된다.

 

inputTextarea.addEventListener('input', function (e) {
    const inputTextarea = document.getElementById('inputTextarea');

    console.log(inputTextarea.selectionStart); // 커서의 시작 위치
    console.log(inputTextarea.selectionEnd); // 커서의 끝 위치
});