[JQuery & JavaScript] input에 숫자만 입력가능하도록 설정

<input type="text" numberOnly>

 

jQuery를 사용하여 numberOnly라는 attribute로 선언된 텍스트필드에 숫자만 입력할 수 있도록 만들어보겠습니다.

 

 

 

• 사실 숫자만 입력 가능하도록 하는 예제는 인터넷상에 굉장히 많이 존재합니다.

아마 대부분의 예제를 다음과 같이 되어있을 것입니다.

 

$("input:text[numberOnly]").on("keyup", function() {

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

});

 

keyup 이벤트와 정규식을 이용하여 숫자를 제외한 나머지 문자를 공백으로 처리하는 방법이죠.

 

 

 

 

• 이 글에서는 제시하는 방법은 위 예제에서 문제점을 보완한 방법입니다.

먼저 첫 번째 문제점은 숫자 단위로 3자리마다 콤마(,)가 없어 숫자를 해석하는 데 있어 가동성이 떨어지게 됩니다.

이를 해결하기 위해 먼저 2가지 유틸리티 함수를 추가하도록 하겠습니다.

 

//3자리 단위마다 콤마 생성

function addCommas(x) {

    return x.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");

}

 

//모든 콤마 제거

function removeCommas(x) {

    if(!x || x.length == 0) return "";

    else return x.split(",").join("");

}

 

그리고 소스코드를 다음과 같이 수정해보죠.

 

$("input:text[numberOnly]").on("keyup", function() {

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

});

 

이제 콤마는 잘 찍히는 것으로 확인됩니다.

하지만 여기서 두 번째 문제점이 발생하게 됩니다.

입력된 텍스트 중간에 focus후 숫자 입력 시 focus가 가장 마지막으로 이동되어버립니다.

 

즉 숫자를 수정 시에 처음부터 입력해야 하는 불편함이 발생하게 됩니다.

 

이를 해결하기 위해서 아래와 같은 해결책이 필요합니다.

1. 텍스트박스에 focus시 콤마(,)를 제거 (콤마로 인한 focus 위치변화가 일어나지 않음)

2. focusout시 콤마(,) 추가 (가동성을 위해)

 

 

 

• 이제 마지막으로 소스코드를 다음과 같이 변경해보죠.

$("input:text[numberOnly]").on("focus", function() {

    var x = $(this).val();

    x = removeCommas(x);

    $(this).val(x);

}).on("focusout", function() {

    var x = $(this).val();

    if(x && x.length > 0) {

        if(!$.isNumeric(x)) {

            x = x.replace(/[^0-9]/g,"");

        }

        x = addCommas(x);

        $(this).val(x);

    }

}).on("keyup", function() {

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

});

 

(숫자와 문자를 혼합해서 입력해보고 3자리 단위마다 콤마가 찍히는지 확인해보세요. 또한, 입력된 텍스트의 수정에도 문제가 없는지 확인해보도록 해요.)

 

 

 

 

 

 

출처: https://hihoyeho.tistory.com/entry/텍스트박스input-text에-숫자만-입력-가능하도록-설정 [하이호예호]