[attribute] HTML - placeholder 속성 - 입력값 '샘플/힌트/예시' 제공 (= placeholder속성 = 플레이스홀더속성) ※ placeholder 글자색

1. placeholder 예제 - <input> 경우
2. placeholder 정의
3. placeholder 구문
4. placeholder 예제 - <textarea> 경우
5. placeholder 글자색
6. IE9 이하 브라우저 호환 방법

placeholder 예제 - <input> 경우

 

<form action="/action_page.php">

    <label for="phone">휴대폰번호:</label> 

    <input type="tel" id="phone" name="phone" placeholder="123-456-7890" pattern="[0-9]{3}-[0-9]{3,4}-[0-9]{3,4}"> 

    <input type="submit">

</form>

 

결과보기

placeholder 정의

 

입력값 힌트(예제) 문자열 지정.

 

---

 

1. placeholder 속성 사용 가능 태그 종류

<input>, <textarea>

※ <input> 태그 경우, text, search, url, tel, email, password 타입만 가능.

 

2.

• 사용자가 값을 입력하기 전까지 표시되며, 입력과 동시에 사라짐.
• JS 이용해 사용자가 입력창에 커서 찍는 순간 (= focus 이벤트)에 사라지게 하려면 JS 이용.

 

3.

IE10 이상 주요 최신 브라우저 모두 지원.

 

placeholder 구문

 

• <input placeholder="text">
• <textarea placeholder="text">...</textarea>

 

---

[속성값]

 

text

입력값 힌트(예제) 문자열.

 

placeholder 예제 - <textarea> 경우

 

자기소개:

<textarea rows="4" cols="30" placeholder="여기에 자기소개 입력하세요."></textarea>

 

결과보기

placeholder 글자색

[input 태그] 

 

<style>

input::placeholder {color:red;}

input:-ms-input-placeholder {color: red;} // IE 10 이상 

input::-webkit-input-placeholder {color:red;} //  Webkit, Blink, Edge

input:-moz-placeholder {color:red;} // Mozilla Firefox 4~18

input::-moz-placeholder {color:red;} // Mozilla Firefox 19 이상

</style>

<input type="text" placeholder="입력하세요" />

결과보기

---

[textarea 태그]

 

<style>

textarea::placeholder {color:red;}

textarea:-ms-input-placeholder {color: red} // IE 10 이상 

textarea::-webkit-input-placeholder {color:red} // Webkit, Blink, Edge

textarea:-moz-placeholder {color:red !important; } // Mozilla Firefox 4~18

textarea::-moz-placeholder {color:red !important; } // Mozilla Firefox 19 이상

</style>

<textarea placeholder="입력하세요."></textarea>

 

결과보기

IE9 이하 브라우저 호환 방법

목차

• [방법1 - jQuery 이용] ★
• [방법2 - JS 이용]

---

[방법1 - jQuery 이용] ★ 

 

https://github.com/mathiasbynens/jquery-placeholder

• 장점: 호환 완벽
• 단점: 코드 몇 줄이 더 들어감.

 

1. jquery 파일 다운로드

https://github.com/mathiasbynens/jquery-placeholder

2. 아래 구조가 되게 업로드 (G5 경우)

/js/jquery.placeholder.min.js

3. head 태그 안에 아래 코드 추가 (G5 경우)

<script src="<?php echo G5_JS_URL?>/jquery.placeholder.js"></script>

<script>

$(document).ready(function(){

    $('input, textarea').placeholder();

}); 

</script>

 

---

[방법2 - JS 이용] 

 

http://jamesallardice.github.io/Placeholders.js/

• 장점: 간편. (자동으로 붙는 placeholder 클래스 이용해 색상 지정 가능.)
• 단점: IE 7~9 경우, 새로고침 시 가끔 placeholder 사라짐.

 

1. Placeholders.js 파일 다운로드 (좌측 파란색 버튼 클릭)

http://jamesallardice.github.io/Placeholders.js/

2. script 코드를 아래 경로에 업로드 (G5 경우)

/js/placeholders.min.js

3. head 태그 안에 아래 코드 추가 (G5 경우)

<script src="<?php echo G5_JS_URL?>/placeholders.min.js"></script>