HTML5 date 입력 필드에서 placeholder가 표시되지 않는 문제, 해결 방법은?

HTML5 날짜 입력 필드의 placeholder 표시 문제

HTML5에서 <input type="date">를 사용하면 브라우저가 자체적으로 날짜 형식(예: YYYY/MM/DD)을 표시하기 때문에 placeholder 속성이 무시됩니다. 이는 대부분의 최신 브라우저에서 공통적으로 나타나는 동작입니다.

다행히 이 문제를 해결할 수 있는 몇 가지 실용적인 방법이 있습니다.

방법 1: JavaScript로 type 전환하기

가장 간단한 방법은 기본 타입을 text로 설정해 두고, 사용자가 필드에 포커스를 맞추는 순간 onfocus 이벤트를 통해 타입을 date로 변경하는 것입니다.

<input placeholder = "Date" class = "textbox-n" type = "text" onfocus = "(this.type = 'date')" id = "date">

이렇게 하면 포커스가 없을 때는 "Date"라는 placeholder가 그대로 보이고, 클릭하면 날짜 선택기(date picker)가 활성화됩니다.

방법 2: CSS ::before 가상 요소 활용하기

CSS만으로 해결하고 싶다면 ::before 가상 요소와 attr() 함수를 조합하는 방법도 있습니다. placeholder 속성 값을 읽어와 화면에 표시하고, 필드에 포커스가 들어오면 해당 내용을 제거합니다.

input[type="date"]::before{
    color: #ffffff;
    content: attr(placeholder) ": ";
}
input[type="date"]:focus::before {
    content: "" !important;
}

여기서 color 값은 배경색에 맞게 조절하면 됩니다. 예를 들어 어두운 배경이라면 흰색(#ffffff), 밝은 배경이라면 회색 계열(#999 등)을 사용하는 것이 좋습니다.

두 방법의 차이점

JavaScript 방식은 구현이 직관적이고 모든 브라우저에서 안정적으로 작동한다는 장점이 있습니다. 반면 CSS 방식은 별도의 스크립트 없이 스타일만으로 처리할 수 있지만, 브라우저에 따라 가상 요소가 날짜 텍스트와 겹쳐 보일 수 있으므로 위치 조정이 필요할 수 있습니다.

프로젝트 상황과 디자인 요구 사항에 따라 적절한 방법을 선택해 적용하시기 바랍니다.