폼 필드 미리 채우기 jQuery

다음 jQuery 스크립트를 사용하여 폼 필드를 미리 채워넣기를 쉽게 구현할 수 있습니다. rel="기본값" 형태로 기본 텍스트를 미리 채워넣을 수 있고, 클릭하면 채워진 텍스트가 사라지고 필드에 아무런 내용이 입력되지 않으면 기본값이 다시 복원됩니다.

//rel 속성을 사용하여 기본값을 표시해야 하는 필드를 채우기
jQuery('.prepopulate').each(function(){
jQuery(this).val( jQuery(this).attr('rel') );
});
//클릭 시 기본값을 지우고 '.not-empty' 클래스를 추가합니다.
jQuery('.prepopulate').focus( function(){
if( jQuery(this).val() == jQuery(this).attr('rel') ){
jQuery(this).val('').addClass('not-empty');
}
});
//클릭 후에 빈 칸으로 남겨두면 기본값을 복원하고 '.not-empty' 클래스를 제거합니다.
jQuery('.prepopulate').blur(function(){
if( jQuery(this).val() =='' ){
jQuery(this).val( jQuery(this).attr('rel') ).removeClass('not-empty');
}
});

데모

여기에서 확인하실 수 있습니다. 워드프레스에서 jQuery를 사용하려면 js 파일을 테마 폴더 아래의 하위 폴더(예: /js/)에 넣고 테마 함수 파일(functions.php)에 jQuery 스크립트를 등록(후크)시켜야 합니다(여기 참고).
(Source: http://www.grasmash.com/)