하위 브라우저 에서 placeholder 사용하는 방법
placeholder 란 아래 그림과같이 input 태그나 textarea 에 적용 할 수 있는 속성 중 하나이다. 하지만 익스플로러 같은경우 하위 브라우저 에서는 지원이 안되고있기 때문에, Javascript 또는 JQuery를 이용하여 따로 적용시켜주어야한다.
(placeholder 속성이 적용된 모습)
이 속성은 위의 그림과 같이 input 요소나 textarea 요소에 적용시킬 수 있으며, 마우스나 포커스가 들어올 시 자동으로 사라진다. 또한, 글이 입력되지 않고 포커스를 빠져나가면, 자동으로 placeholder 속성값이 위의 그림과 같이 다시 생기게 된다. 아래는 placeholder 의 기본적인 사용 예제이다.
placeholder 기본 사용 예제
<input type="text" placeholder="아이디를 입력해 주세요" /> <input type="password" placeholder="비밀 번호를 입력해 주세요." /> <textarea placeholder="글을 입력해 주세요"></textarea>
placeholder 속성값에는 사용자에게 보여줄 글을 입력하면된다. 하지만 앞서말했다시피, 이속성은 IE같은경우 하위브라우저에서는 작동을 하지 않기 때문에, 스크립트를 이용하여 따로 적용을 시켜주어야 한다. 우선 아래의 placeholder.js 파일을 다운로드 받도록 하자.
placeholder.js위의 파일은 사용할 수 있는 적당한 경로에 업로드를 한후 사용하면 된다. 티스토리 같은경우 파일 업로드에서 업로드를 시키기 때문에 소스코드에 적용할 때는 "./images/placeholder.js" 이런식으로 해주면 된다. 아래는 placeholder.js 를 적용하는 예제이다.
placeholder 적용 예제
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>하위 브라우저에서 placeholder 적용</title> <script src="./images/jquery_1.11.0.min.js"></script> <script src="./images/placeholder.js"></script> <script> $(document).ready(function(e) { /*input 요소와 textarea 요소를 선택하여 적용*/ $('input,textarea').placeholder(); }); </script> </head> <body> </body> </html>
위의 예제에서는 JQuery 가 사용되었기때문에, jquery_1.11.0.min.js 파일을 로드해 준것이다. 만약 JQuery 파일이 필요하다면 아래의 다운로드를 이용하면 된다.
'웹프로그래밍 > HTML/CSS/SCRIPT' 카테고리의 다른 글
| pre 요소 : 입력한 HTML 소스코드의 내용을 그대로 보여주고 싶을때 (553) | 2015.06.02 |
|---|---|
| noscript 요소를 사용하여 스크립트가 무효한 브라우저를 대처해보자 (770) | 2015.06.02 |
| og 개체를 이용하여 웹싸이트의 정보를 넣어보자 (656) | 2015.06.02 |
| HTML 에서 data- 속성을 이용하여 태그를 데이터로 사용해보자 (945) | 2015.06.02 |
| meta 요소의 http-equiv 속성 : HTML 문서의 초기정보를 설정할때 (230) | 2015.06.02 |
