jquery 폼항목 숫자만 입력받기+숫자콤마찍기

2019-10-24 업데이트

- 이율입력용 num_only3 추가.

- document 전역설정으로 input 쪽에 class만 추가하면됨

$(function(){

    

    //일반 num_only : 무조건 숫자만입력되게

    $(document).on('keypress', 'input.num_only', function(e){

        if(e.which && (e.which < 48 || e.which > 57) ) e.preventDefault();

    });

    $(document).on('keyup', 'input.num_only', function(e){

        if( $(this).val() != null && $(this).val() != '' ) {

            var tmps = parseInt($(this).val().replace(/[^0-9]/g, '')) || 0;

            $(this).val(tmps);

        }

    });

    

    //금액입력자동콤마 num_only2 : 숫자입력시 3자리단위로 콤마입력

    $(document).on('keypress', 'input.num_only2', function(e){

        if(e.which && (e.which < 48 || e.which > 57) ) e.preventDefault();

    });

    $(document).on('keyup', 'input.num_only2', function(e){

        if( $(this).val() != null && $(this).val() != '' ) {

            //var tmps = $(this).val().replace(/[^0-9]/g, '');

            var tmps = parseInt($(this).val().replace(/[^0-9]/g, '')) || 0;

            var tmps2 = tmps.toString().replace(/(\d)(?=(\d\d\d)+(?!\d))/g, "$1,");

            $(this).val(tmps2);

        }

    });

    

    //이율입력용 99이상입력불가 점(.)입력가능

    $(document).on('keypress', 'input.num_only3', function(e){

        if(e.which && (e.which < 48 || e.which > 57) ){

            if (e.which != 46) e.preventDefault();

        }

    });

    $(document).on('change', 'input.num_only3', function(e){

        if( $(this).val() != null && $(this).val() != '' ) {

            var tmps = $(this).val().split('.',2);

            var pre,post = 0;

            pre = parseInt(tmps[0].replace(/[^0-9]/g, '')) || 0;

            if(pre > 99) pre = 99;

            if(tmps[1])  post = parseInt(tmps[1].replace(/[^0-9]/g, '')) || 0;

            $(this).val(pre);

            if(post > 0) $(this).val(pre+'.'+post);

        }

    });

});

활용 ...

<input type="text" value="13000"  class=" num_only"  />

<input type="text" value="13,000"  class=" num_only2"  />

<input type="text" value="13.88" maxlength='5' class=" num_only3"  />

숫자만입력 num_only
숫자만입력+콤마 num_only2
이율입력(0~99.99) num_only3

//======================================================================

간단한 방법..

input 항목에 class 로 num_only 지정한다.(숫자만허용)

input 항목에 class 로 num_only2 지정한다.(숫자허용 + 숫자 3자리수마다 컴마찍기)

아래는 스크립트..

$(document).ready(function(){ 

    $('.num_only').css('imeMode','disabled').keypress(function(event) {

        if(event.which && (event.which < 48 || event.which > 57) ) {

            event.preventDefault();

        }

    }).keyup(function(){

        if( $(this).val() != null && $(this).val() != '' ) {

            $(this).val( $(this).val().replace(/[^0-9]/g, '') );

        }

    });

    $('.num_only2').css('imeMode','disabled').keypress(function(event) {

        if(event.which && (event.which < 48 || event.which > 57) ) {

            event.preventDefault();

        }

    }).keyup(function(){

        if( $(this).val() != null && $(this).val() != '' ) {

            //var tmps = $(this).val().replace(/[^0-9]/g, '');

            var tmps = $(this).val().replace(/[^0-9]/g, '');

            var tmps2 = tmps.replace(/(\d)(?=(\d\d\d)+(?!\d))/g, "$1,");

            $(this).val(tmps2);

    }

    });

});

--------------

css 

.num_only{ text-align:left; font-size:11px; font-family:Tahoma; font-weight:bold;}

.num_only2{ text-align:right; font-size:11px; font-family:Tahoma; font-weight:bold;}

====================================================

또는 외부라이브러리사용..

jquery.alphanumeric.js 를 인클루드하고.(http://archive.plugins.jquery.com/project/aphanumeric)

$(".numonly").numeric();
$(".numonly").css("ime-mode", "disabled"); //한글사용 비활성화

jquery.alphanumeric.js 는 숫자외에 영문만 입력받는것도 가능

간단하다.

세상 참 좋아졌다.

=====================================================

2017-12-22 업데이트.

<style type="text/css">

.num_only, .num_only2, .num_only3{text-align:right; color:#000; font-weight:bold; font-size:14px; background-color:#fff;}

</style>

<form id="frms">

<input type="text" value="" class="num_only" maxlength='15'  placeholder="숫자만입력">

<input type="text" value="" class="num_only2" maxlength='15'  placeholder="금액입력(숫자만입력+콤마)">

<input type="text" value="" class="num_only3" maxlength='15'  placeholder="금액입력(숫자+소숫점입력허용">

</form>

<script>

$(function(){

    $('#frms').on('keyup', 'input.num_only', function(e){

        if( $(this).val() != null && $(this).val() != '' ) {

            var tmps = parseInt($(this).val().replace(/[^0-9]/g, '')) || '0';

            $(this).val(tmps);

        }

    });

    $('#frms').on('keyup', 'input.num_only2', function(e){

        if( $(this).val() != null && $(this).val() != '' ) {

            var tmps = parseInt($(this).val().replace(/[^0-9]/g, '')) || 0;

            var tmps2 = tmps.toString().replace(/(\d)(?=(\d\d\d)+(?!\d))/g, "$1,");

            $(this).val(tmps2);

        }

    });

    $('#frms').on("keypress keyup blur", 'input.num_only3', function (e) {

        $(this).val($(this).val().replace(/[^0-9\.]/g,''));

        if ((e.which != 46 || $(this).val().indexOf('.') != -1) && (e.which < 48 || e.which > 57)) {

            e.preventDefault();

        }

    });

});

</script>