placeholder 처리

HTML5 지원 브라우저에서 사용할 수 있는 place holder 는 IE8 이하에서는 작동하지 않는다. 그래서 따로 자바스크립트 처리를 해야하는데 서핑 중 좋은 소스를 발견하여 정리한다.

출처 http://www.wunderlist.com/

html5 코딩으로 placeholder 태그를 추가한다. 인풋 박스의 값이 없을 때 placeholder attribute 의 value 를 적용한다.

var layout = {};

layout.placeHolders = function() {

$(':input[placeholder]').each(function() {

var $this = $(this);

if($this.val() === '') {

$this.val($this.attr('placeholder'));

}

$this.focus(function() {

if($this.val() === $this.attr('placeholder')) {

$this.val('');

}

});

$this.blur(function() {

if($this.val() === '') {

$this.val($this.attr('placeholder'));

}

});

};

$(document).ready(function() {

layout.placeHolders();

});

* 참고로 데스크탑 웹에서는 플레이스홀더 사용보다 배경 이미지를 사용하여 처리하는 방법이 더 나아보인다. 플레이스홀더는 기본적으로 값이 존재하는 상태가 되기 때문에 원치 않는 결과를 발생시키기도 하기 때문이다. 벅스뮤직의 로그인 인풋박스를 참고하는 편을 추천!

Fault Note