[javascript] element select 함수 사용하기

HTMLElement.select();

element select 함수는 input text 나 textarea  요소를 드래그한 듯이 선택하기 위해 사용하는 함수다.

다음 예시를 통해 실행해보자

<span style="font-size: 14pt;">contents</span>

당연히 선택을 하면 해당 요소에 focus가 적용된다.

코드를 보자

<input type="text" id="text" value="contents"><input type="button" id="forText" value="text">
<textarea id="textarea">contents</textarea><input type="button" value="textarea" id="forTextArea">

html을 보면 이벤트 쉽게 추가하기 위해 id속성을 추가했다.

스크립트 코드를 보자

document.getElementById('forText').addEventListener('click', function () {
    document.getElementById('text').select();
});

document.getElementById('forTextArea').addEventListener('click', function () {
    document.getElementById('textarea').select();
});

버튼에 각각 input text와 textarea 요소를 구해 select를 할 수 있도록 click 이벤트를 추가했다.