목차
- placeholder 예제 - INPUT 텍스트 플레이스홀더 설정
- placeholder 정의
- placeholder 구문
- placeholder 예제 - INPUT 텍스트 플레이스홀더 반환
- placeholder 예제 - 사용자 입력값 없으면 placeholder 복구
placeholder 예제 - INPUT 텍스트 플레이스홀더 설정
이름: <input type="text" id="hz" placeholder="이름 입력">
<button onclick="homzzang()">클릭</button>
<script>
function homzzang() {
document.getElementById("hz").placeholder = "your name";
}
</script>
결과보기
placeholder 정의
INPUT 텍스트 필드의 placeholder 속성값 설정/반환.
1.
- placeholder 속성은 INPUT 텍스트 필드의 value 값 힌트 주는 문자열임.
- 사용자가 값을 입력하기 전에 입력창에 옅은 회색 글씨로 표시됨.
2.
모든 브라우저 지원.
placeholder 구문
반환
textObject.placeholder
설정
textObject.placeholder = text
[속성값]
text
텍스트 필드에 적합한 value값 형식 힌트 주는 텍스트
[반환값]
placeholder 속성의 속성값을 반환.
placeholder 예제 - INPUT 텍스트 플레이스홀더 반환
이름: <input type="text" id="hz" placeholder="이름 입력">
<button onclick="homzzang()">클릭</button>
<p id="demo"></p>
<script>
function homzzang() {
var x = document.getElementById("hz").placeholder;
document.getElementById("demo").innerHTML = x;
}
</script>
결과보기
placeholder 예제 - 사용자 입력값 없으면 placeholder 복구
<input type="text" id="self" placeholder="자기소개 입력해주세요.">
<script>
const self = document.getElementById("self");
// 포커스 이벤트 처리
self.addEventListener("focus", function() {
if (this.placeholder === this.value) {
this.value = "";
}
});
// 블러 이벤트 처리
self.addEventListener("blur", function() {
if (this.value === "") {
this.value = this.placeholder;
}
});
</script>
결과보기
