HTML DOM 숫자 입력 필드 placeholder 속성 완벽 정리

HTML DOM의 placeholder 속성은 숫자(number) 타입 입력 필드에 적용된 placeholder 속성의 값을 가져오거나 변경할 때 사용됩니다. placeholder란 사용자가 실제로 값을 입력하기 전에 입력 필드 안에 힌트 형태로 보여지는 안내 텍스트를 의미합니다.

문법(Syntax)

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

placeholder 값 가져오기

object.placeholder

placeholder 값 변경하기

object.placeholder = "텍스트"

예제(Example)

다음 예제는 버튼 클릭 시 숫자 입력 필드의 placeholder 텍스트를 동적으로 변경하는 방법을 보여줍니다.

<!DOCTYPE html>
<html>
<head>
<style>
    html{
        height:100%;
    }
    body{
        text-align:center;
        color:#fff;
        background: linear-gradient(62deg, #FBAB7E 0%, #F7CE68 100%) center/cover no-repeat;
        height:100%;
    }
    p{
        font-weight:700;
        font-size:1.1rem;
    }
    input{
        display:block;
        width:35%;
        border:2px solid #fff;
        background-color:transparent;
        color:#fff;
        font-weight:bold;
        padding:8px;
        margin:1rem auto;
    }
    .btn{
        background:#0197F6;
        border:none;
        height:2rem;
        border-radius:2px;
        width:35%;
        margin:2rem auto;
        display:block;
        color:#fff;
        outline:none;
        cursor:pointer;
    }
</style>
</head>
<body>
<h1>placeholder 속성 데모</h1>
<p>안녕하세요, 나이를 입력해 주세요:</p>
<input type="number" class="numberInput" placeholder="나이를 입력하세요">
<button type="button" onclick="change()" class='btn'>Placeholder 변경</button>
<script>
    function change() {
        var numberInput = document.querySelector(".numberInput");
        numberInput.placeholder = "정확한 나이를 입력해 주세요";
    }
</script>
</body>
</html>

실행 결과(Output)

위 코드를 실행하면 다음과 같은 화면이 출력됩니다.

HTML DOM 숫자 입력 필드 placeholder 속성 완벽 정리

초기 상태에서는 입력 필드에 "나이를 입력하세요"라는 placeholder 텍스트가 표시됩니다. 이후 "Placeholder 변경" 버튼을 클릭하면 JavaScript의 change() 함수가 실행되어 placeholder 값이 새로운 텍스트로 즉시 변경됩니다.

HTML DOM 숫자 입력 필드 placeholder 속성 완벽 정리

정리

이처럼 placeholder 속성을 활용하면 자바스크립트만으로 입력 필드의 안내 문구를 동적으로 제어할 수 있습니다. 사용자의 행동이나 특정 조건에 따라 힌트 메시지를 바꿔야 하는 폼 UI를 구현할 때 매우 유용하게 활용됩니다.