카테고리 없음

jQuery기반 input 숫자만 입력받게. (+콤마처리)

Dongkkase 2013. 3. 19. 19:12
반응형

jquery function으로 만들어본  input 숫자만 입력받게 하는 부분입니다. 숫자와 더불어 3자리 단위로 콤마까지 자동으로 찍히게 합니다.



JavaScript 코드입니다.

(function ($) {
    // 숫자 제외하고 모든 문자 삭제.
    $.fn.removeText = function(_v){
        //console.log("removeText: 숫자 제거 합니다.");
        if (typeof(_v)==="undefined")
        {
            $(this).each(function(){
                this.value = this.value.replace(/[^0-9]/g,'');
            });
        }
        else
        {
            return _v.replace(/[^0-9]/g,'');
        }
    };
    
    // php의 number_format과 같은 효과.
    $.fn.numberFormat = function(_v){
        this.proc = function(_v){
            var tmp = '',
                number = '',
                cutlen = 3,
                comma = ','
                i = 0,
                len = _v.length,
                mod = (len % cutlen),
                k = cutlen - mod;
                
            for (i; i < len; i++)
            {
                number = number + _v.charAt(i);
                if (i < len - 1)
                {
                    k++;
                    if ((k % cutlen) == 0)
                    {
                        number = number + comma;
                        k = 0;
                    }
                }
            }
            return number;
        };
        
        var proc = this.proc;
        if (typeof(_v)==="undefined")
        {
            $(this).each(function(){
                this.value = proc($(this).removeText(this.value));
            });
        }
        else
        {
            return proc(_v);
        }
    };
    
    // 위 두개의 합성.
    // 콤마 불필요시 numberFormat 부분을 주석처리.
    $.fn.onlyNumber = function (p) {
        $(this).each(function(i) {
            $(this).attr({'style':'text-align:right'});
            
            this.value = $(this).removeText(this.value);
            this.value = $(this).numberFormat(this.value);
            
            $(this).bind('keypress keyup',function(e){
                this.value = $(this).removeText(this.value);
                this.value = $(this).numberFormat(this.value);
            });
        });
    };
    
})(jQuery);



html 예제 코드입니다.

func.js에 위의 javascript코드를 넣고 저장한뒤 아래의 html로 예제를 만들어 직접 사용해보세요 :)








Sample1

콤마처리, 숫자값만 입력, submit시 콤마 삭제, 입력시 콤마 처리.

Sample2

콤마처리

Sample3

숫자값 제외 모든 텍스트 삭제




반응형