placeholder

HTML5의 placeholder 속성

input 요소와 textarea 요소에 알맞은 힌트를 제공할 목적으로 사용

 

이런식으로 적색네모 안에 쓰여있는 글자가 힌트

해당 칸에 어떤걸 입력해야할지 알려주는 용도

 

사용 방법

<input type="text" placeholder="힌트 문구">

 

문제점

IE 6~9 사이의 브라우저는 HTML5의 placeholder 속성 지원불가

 

해결 방법

1. 스크립트 다운로드(https://github.com/mathiasbynens/jquery-placeholder) placeholder.js 를 사용하면 IE9 이하는 .placeholder 이라는 클래스가 자동으로 생성 2. 코드 추가 <script type="text/javascript" src="./jquery.placeholder.js"/> 3. js파일에 코드 추가 $('input, textarea').placeholder(); 4. css.파일에 .placeholder 클래스를 이용해 속성 셋팅

css설정

::placeholder 선택자로 선택하여 스타일 설정가능
input::placeholder : Chrome, Firefox, Opera, Safari 최신 버전에서 적용가능

Chrome, Firefox, Opera, Safari의 구버전과 IE에서는 적용되지 않아서 다른 방법으로 설정
input::-webkit-input-placeholder : Chrome
input:-ms-input-placeholder : IE
input:-mos-input-placeholder : Firefox