[jQuery plugin] 기본값이 있는 inputbox 만들기

멀더가 만든 또하나의 jQuery Plugin...

- name : jsMarkingInput

- desc  : 기본값이 있는 html inputbox 

웹개발에서 아주 많이 사용하는 기능중 하나가 

HTML INPUT BOX 에 기본값을 넣어 두고, keyin 이나 click 이벤트에 clear 시켜 주는 작업입니다..

이런 작업을 아주 손쉽게 할 수 있는 초간단 Plugin 을 개발해 보았습니다. (많은 테스트가 없어서, 버그가 있을 염려가 있습니다.)

DEMO output

1. 기본값이 미리 입력되 있다.

2. click 시 기본값이 clear 된다.

// Script

(function($) {                           

    $.fn.jsMarkingInput = function(o) {

        o = $.extend({

              grayColor:'#AAAAAA'  // 기본입력값의 color 값입니다... 원하시는 값으로 교체 할 수 있습니다.

            , defaultTextAttrName:'markingText' // 기본입력 text 를 담고 있는 attribute name 입니다. 아래 html 참조

        }, o || {});

        

        return this.each(function(index) {      

                // 기본입력값 처리

         $(this).attr('orgcolor',$(this).css('color')).css('color',o.grayColor)

                         .val( $(this).attr(o.defaultTextAttrName) );

        

              // 이벤트 발생시 처리

         $(this).one('keypress', function() {

                $(this).css('color',$(this).attr('orgcolor')).val( '' );

                });

   $(this).one('click', function() {

                $(this).css('color',$(this).attr('orgcolor')).val( '' );

                });

            return this;

        });

};

})(jQuery);

// empty css : .markingInput {}

<!-- HTML CODE -->

<input type="text"  class="markingInput" markingText="basename"  />

 <br/>        

 <input type="text" name="chatTimelineId"  class="markingInput" markingText="timelineId"  value="" size="20" maxlength="20"/>timeline Link</span></a>