HTML5 지원 안되는 브라우저에서 placeholder 기능 구현

title 속성에 설정 된 값을 기본 안내 문구로 지정하고, 특정 class 명을 찾아 onblur, onfocus 에 따라 값이 보여지고 안 보여지고 처리하는 

방식이다.

자바스크립트는 아래와같이 구현해 놓았다.

var util = { /** * HTML5 placeholder 구현 * @param obj */ placeholder : function(objClass) { $('.placeholder').each(function() { var text = $(this).attr('title'); var val = $(this).val(); if(val == '') { $(this) .css('color', '#a8a8a8') .val(text); } $(this) .blur(function() { util.setDefaultValue(this, text, 'blur'); }) .focus(function() { util.setDefaultValue(this, text, 'focus'); }); }); }, /** * Input Box 기본값 설정 */ setDefaultValue : function(obj, text, type) { var val = $(obj).val(); if(type == 'blur') { if(val == '') { $(obj) .css('color', '#a8a8a8') .val(text); } } else if(type == 'focus') { if(val == text) { $(obj) .css('color', '#000000') .val(''); } } }, /** * Input Box 기본값 삭제 * @param obj * @param text */ removeDefaultValue : function(objClass) { $('.placeholder').each(function() { var text = $(this).attr('title'); var val = $(this).val(); if(val == text) { $(this).val(''); } }); } }

실제 사용하는 방법은 다음과 같다.

값을 전송 전에 설정된 값을 지우고 전송 후에는 값을 다시 설정하는 방식이다.

비동기화 처리시 다시 설정해야 하나 동기화 처리시에는 굳이 다시 설정해 줄 필요는 없다.

<script type="text/javascript"> $(document).ready(function() { // 안내문구 설정 util.placeholder(); }); function go() { // 안내문구 삭제 util.removeDefaultValue(); // 전송 처리 // ... // 안내문구 다시 설정 util.placeholder(); } </script> <input type="text" class="placeholder" title="이름" /> <input type="button" value="전송" onclick="go();" />