[JavaScript] select()와 setSelectionRange() 메서드

728x90

목 차

• 1. select 메서드와 setSelectionRange 메서드란?
• 2. select 메서드
• 2-1. 설명
• 2-2. 문법
• 2-3. 특징
• 2-4. 예제
• 3. setSelectionRange 메서드
• 3-1. 설명
• 3-2. 문법
• 3-3. 특징
• 3-4. 예제
• 4. select 메서드와 setSelectionRange 메서드의 비교
• 5. 고급 활용
• 5-1. 텍스트를 추가 입력 시 특정 범위 강조하기
• 5-2. 입력 필드에 텍스트를 자동 삽입 후 선택하기
• 5-3. 사용자가 선택한 영역 가져오기

 

1. select 메서드와 setSelectionRange 메서드란?

• JavaScript의 select와 setSelectionRange 메서드는 입력 필드(<input> 또는 <textarea>)에서 사용자가 선택한 텍스트를 조작하거나 특정 범위를 설정하는 데 사용됩니다. 이 두 메서드는 주로 텍스트 편집기, 자동완성 기능, 또는 사용자 입력 조작 시 유용합니다.

 

---

 

2. select 메서드

2-1. 설명

• <input> 또는 <textarea> 요소에서 전체 텍스트를 선택합니다.
• 사용자가 마우스로 텍스트를 드래그해 선택한 것과 같은 효과를 줍니다.

 

2-2. 문법

element.select();

• element : <input> 또는 <textarea> 요소.

 

2-3. 특징

• 사용자가 입력 필드를 클릭하면 전체 텍스트가 선택됩니다.
• 텍스트가 길 경우, 자동으로 스크롤을 조정해 선택된 영역을 보여줍니다.

 

2-4. 예제

<input type="text" id="textInput" value="Hello, World!">
<button onclick="selectText()">Select Text</button>

<script>
  function selectText() {
    const input = document.getElementById('textInput');
    input.select(); // 텍스트 전체 선택
  }
</script>

 

---

 

3. setSelectionRange 메서드

3-1. 설명

• <input> 또는 <textarea> 요소에서 텍스트의 특정 범위를 선택합니다.
• 사용자가 드래그하여 텍스트의 일부를 선택한 것과 같은 효과를 줍니다.

 

3-2. 문법

element.setSelectionRange(start, end, [direction]);

• start : 선택 영역의 시작 인덱스(0부터 시작).
• end : 선택 영역의 끝 인덱스(선택되지 않는 첫 번째 문자 인덱스).
• direction (선택 사항) :
  • "forward": 커서가 시작점에서 끝점으로 이동.
  • "backward": 커서가 끝점에서 시작점으로 이동.
  • "none": 방향 없음(기본값).

 

3-3. 특징

• 선택 범위를 특정할 수 있어 텍스트의 일부만 강조할 수 있습니다.
• 사용자가 입력한 텍스트를 수정하거나 특정 영역만 편집하도록 유도할 수 있습니다.

 

3-4. 예제

<input type="text" id="textInput" value="Hello, World!">
<button onclick="selectRange()">Select Range</button>

<script>
  function selectRange() {
    const input = document.getElementById('textInput');
    // "Hello" 부분만 선택 (인덱스 0~5)
    input.setSelectionRange(0, 5); 
  }
</script>

 

---

 

4. select 메서드와 setSelectionRange 메서드의 비교

메서드	설명	사용예제
select()	입력 필드 전체 텍스트를 선택합니다.	텍스트 전체를 쉽게 복사하거나 편집하도록 유도.
setSelectionRange()	텍스트의 특정 범위를 선택합니다.	특정 부분을 강조하거나 부분적으로 편집 유도.

 

---

 

5. 고급 활용

5-1. 텍스트를 추가 입력 시 특정 범위 강조하기 

<textarea id="textArea">The quick brown fox jumps over the lazy dog.</textarea>
<button onclick="highlight()">Highlight "quick"</button>

<script>
  function highlight() {
    const textArea = document.getElementById('textArea');
    // "quick" 단어 강조 (인덱스 4~9)
    textArea.setSelectionRange(4, 9);
    textArea.focus(); // 입력 필드를 활성화
  }
</script>

 

5-2. 입력 필드에 텍스트를 자동 삽입 후 선택하기

<input type="text" id="textInput">
<button onclick="insertAndSelect()">Insert & Select</button>

<script>
  function insertAndSelect() {
    const input = document.getElementById('textInput');
    input.value = "Hello, World!";
    input.setSelectionRange(7, 12); // "World" 부분 선택
    input.focus();
  }
</script>

 

5-3. 사용자가 선택한 영역 가져오기

<textarea id="textArea">This is a sample text.</textarea>
<button onclick="getSelection()">Get Selection</button>

<script>
  function getSelection() {
    const textArea = document.getElementById('textArea');
    const start = textArea.selectionStart; // 선택 시작 인덱스
    const end = textArea.selectionEnd;     // 선택 끝 인덱스
    const selectedText = textArea.value.substring(start, end);
    alert(`Selected Text: ${selectedText}`);
  }
</script>