IE9 이하에서 placeholder 적용하기

각종 입력 폼에 예시 문구를 나타내기 위해서 예전에는 이미지를 잘라서 position을 잡고 포커싱이 되면 이미지가 사라지게 하는 방법을 사용했다.

HTML5에 추가된 placeholder 속성을 사용하면 아주 간단하게 예시 문구를 처리할 수 있는데, 이 죽일 넘의 IE는 IE9 이하는 placholder가 뭔지 모른다.

하지만 간단하게 스크립트 하나만 추가하면 IE9 이하에서도 placeholder를 사용할 수 있다.

두 가지 스크립트가 있다. 하나는 JQuery를 사용하는 방법이고 하나는 Placeholders.js이다.

http://jamesallardice.github.io/Placeholders.js/  에서 스크립트를 다운 받고 아래와 같이 써준다.

이러면 끝!
각 버전별로 잘 동작하는 것을 확인할 수 있었다.

 

2014.09.22 추가사항

Placeholder.js 파일은 간편하지만, IE7~9에서 새로고침을 누른 경우 가끔 placeholder가 사라질 때가 있다.

그래서 지금 진행중인 프로젝트에서는 JQuery를 사용하는 방법을 이용하기로 한다.

우선 https://github.com/mathiasbynens/jquery-placeholder 에서 스크립트를 다운받고 아래와 같이 써준다.

그런 다음,  코드 한 줄을 추가한다.

IE7~9에서 전부 확인해보니 별 문제 없이 동작하였다. 개인적으로는 이 방법을 더 추천한다.

 

2015.02.11 추가사항

placeholder.js를 사용하면 IE9이하는  .placeholder라는 클래스가 자동으로 input에 생성된다.

이것을 이용하여 placeholder 색상을 바꿀수 있다.

다만, IE10이상, FF, Chrome의 경우는 각각 브라우저 업체별 접두어를 사용해서 변경한다.

 

2014년은 자바스크립트 공부의 해

웹 마스터로 약 6년 간 일하다가 사정이 생겨 2007년 웹 퍼블리셔로 전직을 했다.
웹 퍼블리셔는 단순하게 HTML + CSS만 하면 된다고 생각했는데 그게 아니였다.
웹 표준으로 코드를 작성해야하고, SEO도 고려해야하고, 웹 접근성도 고려해야하고, 자바스크립트도 작성해야 하고, 더 넓게는 백앤드 관련 지식도 필요했다.

약 6년간 웹 퍼블리셔로 일하면서 어려웠던 적이 많았으나 가장 큰 벽이 바로 자바스크립트였다.
JQuery라는 자바스크립트 라이브러리로 쉽게 갈 수 도 있지만 자바스크립트에 대한 지식 없이는 이것도 쉬운게 아니였다. 기초가 없으니 응용을 할 수 없었다. 보지도 않는 책을 계속 사기만 했다. 왠지 관련 책을 갖고만 있어도  실력이 늘어날 것 같은 기분이랄까. 책꽂이에 꽂힌 자바스크립트 책만 15권이다.

언젠가는 공부해야지 하고 미루다보니 처음 자바스크립트를 하겠다고 마음 먹은 시간으로 부터 7년이나 지났다.
점점 자바스크립트 활용 범위는 넓어지고 있고 진작 공부하지 않은 것을 후회하고 있었다.

그러다가 클리어보스 운영자 조은님의 자바스크립트 스터디 모집 공고를 보게 되었고 남편의 허락으로 참가할 수 있게 되었다. 이제 1주차를 했고, 스터디 진행 원칙을 볼 때 확실하게 공부할 수 있을 것 같다. 이 스터디의 주 교재는 한빛미디어에서 출간 된 ” 더글라스 크록포드의 자바스크립트 핵심 가이드” 라는 책이다.

생활코딩 그룹에서도 자바스크립트를 제대로 공부해보자는 글을 보게 되었고, 그 글 작성자분이 만든 “자바스크립트 제대로 배우기 스터디그룹”에도 가입했다. 이 곳은 자바스크립트 제대로 배우기라는 기본 가이드(http://bit.ly/1fsUmuG)가 있고 그 가이드에 따라 8~12주간 공부하고 요약해서 자신의 블로그에 올리는 것이다.

두 가지를 동시에 진행하는 것에 약간의 무리가 있긴하겠지만…
올해는 자바스크립트를 제대로 공부하면서 도약의 해로 삼아볼까 한다.

덧…5월 20일부터 매주 화요일 2시 우리 팀에서도 인사이드 자바스크립트라는 책과 생활코딩 자바스크립트를 공부하기 시작했다. 올해는 정말 자바스크립트 공부의 해 인가보다 🙂