[js] JS - placeholder 속성 - INPUT 텍스트 플레이스홀더 설정/반환 (= placeholder속성 = 프레이스홀더속성) ※ 인풋 플레이더홀더 속성 / 자리표시자

목차

1. placeholder 예제 - INPUT 텍스트 플레이스홀더 설정
2. placeholder 정의
3. placeholder 구문
4. placeholder 예제 - INPUT 텍스트 플레이스홀더 반환
5. 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>

 

결과보기