HTML DOM Textarea select() 메서드 – 텍스트 영역 내용 한 번에 선택하기

HTML DOM의 Textarea select() 메서드는 HTML 문서에서 <textarea> 요소에 입력된 전체 내용을 한 번에 선택하는 기능을 제공합니다. 이 메서드를 활용하면 사용자가 마우스로 일일이 드래그하지 않아도 버튼 클릭 한 번으로 텍스트 영역의 모든 내용을 손쉽게 선택하여 복사하거나 수정할 수 있습니다.

구문

select() 메서드의 기본 구문은 다음과 같습니다.

object.select()

select() 메서드는 별도의 매개변수를 받지 않으며 반환값도 없습니다. 단순히 해당 텍스트 영역의 내용을 선택 상태로 만드는 역할만 수행합니다.

예제

다음 예제는 Textarea select() 메서드를 사용하여 버튼을 클릭했을 때 텍스트 영역의 내용을 전체 선택하는 방법을 보여줍니다.

<!DOCTYPE html>
<html>
<style>
    body {
        color: #000;
        height: 100vh;
    }
    .btn {
        background: #db133a;
        border: none;
        height: 2rem;
        border-radius: 2px;
        width: 40%;
        display: block;
        color: #fff;
        outline: none;
        cursor: pointer;
    }
</style>
<body>
<h1>DOM Textarea select() Method Demo</h1>
<textarea rows='5' cols="30">Hi! I'm a text area element with some dummy text.</textarea>
<button onclick="set()" class="btn">Select textarea content</button>
<script>
    function set() {
        document.querySelector("textarea").select();
    }
</script>
</body>
</html>

실행 결과

위 코드를 브라우저에서 실행하면 다음과 같은 화면이 나타납니다.

HTML DOM Textarea select() 메서드 – 텍스트 영역 내용 한 번에 선택하기

화면의 “Select textarea content(텍스트 영역 내용 선택)” 버튼을 클릭해 보세요.

HTML DOM Textarea select() 메서드 – 텍스트 영역 내용 한 번에 선택하기

버튼을 클릭하는 순간 <textarea> 요소 안의 모든 텍스트가 자동으로 선택된 것을 확인할 수 있습니다.

활용 팁

select() 메서드는 주로 “전체 복사” 기능과 함께 사용됩니다. document.execCommand('copy') 또는 최신 Clipboard API와 조합하면, 사용자가 클릭 한 번으로 텍스트 영역의 내용을 클립보드에 바로 복사하는 편리한 기능을 간단하게 구현할 수 있습니다.