HTMLInputElement의 selectionStart, selectionEnd, selectionDirection에 대해 알아보자
현재 인풋의 커서포지션을 알아내기 위해 알게 된 selectionStart.
selectionStart를 알게 된 김에 selection으로 시작되는 모든 요소를 알아보기로 했다!
selectionStart란?
인풋에서 선택된 텍스트의 "시작" 인덱스를 알려주거나, 텍스트가 선택되지 않았을 때는 인풋 내 텍스트 인덱스**(현재 커서 위치)**를 알려준다.
나는 현재 커서 위치가 필요했기에, selectionStart를 사용하게 되었다.
내 코드에 적용한 예시를 첨부하겠다!
위에 보이는 이 함수는 인풋의 onChange의 이벤트 핸들러이다. 여기서 받는 event를 사용하여, event.target.selectionStart를 해주면 원하는 결과값을 알 수가 있었다.
리액트가 아닌 그냥 자바스크립트에서 이벤트 리스너와 함께 selectionStart로 위치를 알아내고 싶다면 아래 예시처럼 쓸 수가 있겠다.
만약 selectionStart가 selectionEnd의 숫자보다 크다면, 그 때는 둘다 selectionEnd의 벨류로 취급된다.
selectionEnd란?
selectionStart와 굉장히 유사하다. 인풋에서 선택된 텍스트의 마지막 위치 인덱스를 알려준다. 하지만, 텍스트가 따로 선택되지 않았을 때는 selectionStart와 동일하게 현재 커서 위치를 알려준다.
selectionStart와 selectionEnd는 주로 같이 쓰여 선택한 텍스트의 범위를 알아내기 위해 많이 사용된다고 한다.
만약 selectionEnd가 selectionStart보다 작다면, 둘 다 selectionEnd의 벨류로 취급된다.
selectionDirection이란?
인풋에서 텍스트를 선택했을 때의 선택 방향을 알려주는 속성이다.
selectionStart에서 selectionEnd(왼쪽에서 오른쪽)으로 선택되었다면 "forward"를 반환한다.
selectionEnd에서 selectionStart(오른쪽에서 왼쪽)으로 선택되었을 때는 "backward"로 알려준다.
텍스트가 선택되지 않았을 때는 "none"을 나타낸다.
전체적으로 이 세 가지를 한꺼번에 사용하는 예시를 올려보겠음
설명을 위해 MDN 문서를 활용했다
출처: https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/selectionStart
