Enhanced Form

Form의 기본 기능을 강화하여 사용 편의성을 높입니다.

Placeholder

HTML5에서는 input요소에 placeholder라는 속성이 추가되었습니다. placeholder는 사용자가 input요소에 정보를 입력하기전 간단한 힌트를 보여주는 속성입니다. 현재 대부분 최신브라우저들이 지원하나 구형브라우저에서는 지원하지 않고, 브라우저마다 동작이 조금씩 다른 모습을 보여줍니다. 그리하여 모든 브라우저가 동일한 기능을 지원하기 위하여 아래 기능이 필요합니다.

placeholder 예제
HTML
      <form action="" method="" class="form-horizontal">
        <fieldset>
          <legend>Digit input only</legend>
          <div>
            <label for="placeholder-name">이름</label>
            <input type="text" id="placeholder-name" class="input-text" placeholder="John Doe" />
          </div>
          <div>
            <label for="placeholder-test">전화번호</label>
            <input type="text" id="placeholder-test" class="input-text" placeholder="012-3456-7890" />
          </div>
          <div>
            <label for="placeholder-email">이메일</label>
            <input type="text" id="placeholder-test" class="input-text" placeholder="john.d@email.com" />
          </div>
          <div>
            <label for="placeholder-pw">비밀번호</label>
            <input type="password" id="placeholder-pw" class="input-text" placeholder="8자이상" />
          </div>
        </fieldset>
      </form>
CSS
      /* placeholder */
      input::-webkit-input-placeholder, textarea::-webkit-input-placeholder{color: #D4D4D4;}
      input:-moz-placeholder, textarea:-moz-placeholder{color: #D4D4D4;}
      input:-ms-input-placeholder, textarea:-ms-input-placeholder{color: #D4D4D4;}
      .placeholder{color: #D4D4D4; white-space: nowrap; overflow: hidden;text-overflow: ellipsis; -o-text-overflow: ellipsis;}
JAVASCRIPT
      $.fn.placeholder = function(){
        //placeholder기능 있으면 넘어감. 브라우저마다 같은 결과를 내려면 주석처리
        //if('placeholder' in document.createElement('input')) return;
        this.each(function(){
          var $input = $(this)
            , $wrap = $input.parent().css({'position':'relative','z-index':'0'})
            , $placeholder = $(''+$input.attr('placeholder')+'')
            , background_color = $input.css('background-color');
          $placeholder.css({
            "display": "block",
            "width": $input.width(),
            "height": $input.height(),
            "padding-top": $input.css('padding-top'),
            "padding-left": $input.css('padding-left'),
            "padding-right": $input.css('padding-right'),
            "padding-bottom": $input.css('padding-bottom'),
            "margin-top": $input.css('margin-top'),
            "margin-left": $input.css('margin-left'),
            "margin-right": $input.css('margin-right'),
            "margin-bottom": $input.css('margin-bottom'),
            "line-height": $input.css('line-height'),
            "text-align": $input.css('text-align'),
            "font-family": $input.css('font-family'),
            "font-size": $input.css('font-size'),
            "background-color": background_color,
            "position": "absolute",
            "z-index": "-1",
            "top": $input.position().top +1,
            "left": $input.position().left +1
          }).click(function(){
            $input.focus();
          });

          $input.data('placeholder',$placeholder)
            .removeAttr('placeholder')
            .css('background-color','transparent;')
            .before($placeholder)
            .on({
              "keydown keyup paste": function(){
                setTimeout(function(){
                  var is_val = !!$input.val();
                  $input.css('background-color', is_val ? background_color : 'transparent');
                  $wrap[is_val ? 'addClass':'removeClass']('inputed');
                },9);
              },
              "focusin focusout focus blur": function(event){
                $input.trigger('keyup');
                $wrap[event.type == 'focusin' ? 'addClass':'removeClass']('focusin');
              }
            }).trigger('keyup');
        });
      }
      $(':input[placeholder]').placeholder();


Formatter - Input Digit Only

숫자정보만 입력받아야 할때 UI측에서 숫자만 입력받게 하도록 합니다. 또한 전각문자로 된 숫자도 서버측 오류를 피하기 위해 반각으로 전환합니다.

Digit input only
HTML
      <form action="" method="" class="form-horizontal">
        <fieldset>
          <legend>Digit input only</legend>
          <div>
            <label for="placeholder2-digit">숫자만</label>
            <input type="text" id="placeholder2-digit" class="input-text only-digit" placeholder="Only Digit" />
          </div>
          <div>
            <label for="placeholder-name">전화번호</label>
            <input type="text" id="placeholder-name" class="input-text tel-input" placeholder="012-3456-7890" />
          </div>
          <div>
            <label for="placeholder-pw">비밀번호</label>
            <input type="password" id="placeholder-pw" class="input-text only-digit" maxlength="8" placeholder="숫자로 8자 이하" />
          </div>
          <div>
            <label for="placeholder-dollar">Dollars</label>
            <input type="password" id="placeholder-decimal" class="input-text decimal-input" maxlength="8" placeholder="숫자로 8자 이하" />
          </div>
        </fieldset>
      </form>
JAVASCRIPT
      String.prototype.toHalfWidth = function(){
        return this.replace(/[！-～]/g, function(r){
          return String.fromCharCode(r.charCodeAt(0) - 0xFEE0);
        });
      }

      $.fn.formatter = function(options){
        var opt = $.extend({},$.fn.formatter.dafaults,options);

        return this.each(function(){
          var $input = $(this).css('ime-mode','disabled');

          $input.on({
            "keyup keydown focus blur paste": function(event){
              if(event.keyCode){
                var k = event.keyCode;
                if(event.shiftKey || !((k > 111 && k < 124) || (k > 47 && k < 58) || (k > 95 && k < 106) || k == 8 || k == 9 ||k == 13 || k == 37 || k == 39)){
                  event.preventDefault();
                }
              }
              setTimeout(function(){
                 var this_val = $input.val().toHalfWidth().replace(/\D/g,'');
                 $input.val(this_val);
              },9);
            }
          });
        });
      }
      $.fn.formatter.dafaults = {
        "allow": "all", //all or digit,alphabet,array
        "format": null
      }
      $('input.only-digit').formatter({
        "allow":"digit"
      });

      $('input.tel-input').formatter({
        "allow":"digit",
        "format": "###-####-####"
      });

      $('input.decimal-input').formatter({
        "allow":"digit",
        "format": "###-####-####"
      });


History