HTML DOM Textarea placeholder 속성 – 자리 표시자 값 가져오기와 설정하기

HTML DOM의 Textarea placeholder 속성은 HTML 문서 내 텍스트 영역(textarea) 요소의 placeholder 속성 값을 반환하거나 수정하는 데 사용됩니다. placeholder(자리 표시자)란 사용자가 입력하기 전에 입력 필드에 힌트 형태로 보여지는 안내 문구를 의미하며, JavaScript를 통해 이 값을 동적으로 읽어오거나 변경할 수 있습니다.

문법(Syntax)

placeholder 속성의 기본 문법은 다음과 같습니다.

1. placeholder 값 가져오기

object.placeholder

2. placeholder 값 설정하기

object.placeholder = "text"

값을 인자 없이 호출하면 현재 설정된 placeholder 문자열을 반환하고, 문자열을 할당하면 해당 값으로 자리 표시자가 변경됩니다.

그럼 HTML DOM Textarea placeholder 속성이 실제로 어떻게 동작하는지 예제를 통해 확인해 보겠습니다.

예제(Example)

<!DOCTYPE html>
<html>
<style>
    body {
        color: #000;
        background: lightseagreen;
        height: 100vh;
    }
    .btn {
        background: #db133a;
        border: none;
        height: 2rem;
        border-radius: 2px;
        width: 40%;
        display: block;
        color: #fff;
        outline: none;
        cursor: pointer;
    }
    .show {
        margin: 1rem 0;
        font-size: 1.5rem;
    }
</style>
<body>
<h1>DOM Textarea placeholder Property Demo</h1>
<textarea placeholder="Hi! I'm placeholder text of a textarea element" rows="8" cols='20'></textarea>
<button onclick="set()" class="btn">Show Placeholder</button>
<div class="show"></div>
<script>
    function set() {
        document.querySelector('.show').innerHTML = document.querySelector("textarea").placeholder;
    }
</script>
</body>
</html>

위 예제는 textarea 요소에 placeholder 속성을 미리 지정해 두고, 버튼을 클릭하면 해당 속성 값을 읽어 화면에 출력하는 구조입니다. 핵심 코드인 document.querySelector("textarea").placeholder 부분이 바로 placeholder 속성 값을 가져오는 역할을 합니다.

실행 결과(Output)

HTML DOM Textarea placeholder 속성 – 자리 표시자 값 가져오기와 설정하기

페이지가 로드되면 위와 같이 textarea에 자리 표시자 문구가 표시됩니다. 여기서 "Show Placeholder" 버튼을 클릭해 보세요.

HTML DOM Textarea placeholder 속성 – 자리 표시자 값 가져오기와 설정하기

버튼을 클릭하면 placeholder 속성에 저장된 값이 아래 영역에 그대로 출력되는 것을 확인할 수 있습니다. 이처럼 placeholder 속성을 활용하면 입력 필드의 안내 문구를 상황에 맞게 동적으로 제어할 수 있습니다.