텍스트박스(input text)에 숫자만 입력 가능하도록 설정

<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,"")));
});
 

결과

(숫자와 문자를 혼합해서 입력해보고 3자리 단위마다 콤마가 찍히는지 확인해보세요)

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

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

입력된 텍스트 중간에 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자리 단위마다 콤마가 찍히는지 확인해보세요. 또한, 입력된 텍스트의 수정에도 문제가 없는지 확인해보도록 해요.)

---

마지막으로..

윗글에서는 문제점이라고 명시했지만 사실 문제점이 아닌 보완 해야 될 점이라고 해야 올바른 표현인 것 같습니다. 또한, 이 글에서 제시하고 있는 해결책이 너무나 사소한 문제점으로 생각될 수도 있지만 이러한 작은 불편함을 해소하는 것이 좋은 사용자 경험을 제공하는 데 있어 그 시작점이 될 수 있겠죠.

혹시 관련하여 더 좋은 예제를 가지고 계시거나 이미 javascript 라이브러리로 나와 있다면 제보해주세요.

'감사함'이라는 마음의 선물을 드리도록 하겠습니다. 

2020.08.07 추가

특정 IE 버전 이하에서는 크로스 브라우징 이슈가 발생할 수 있습니다.

서비스 적용 시 테스트 후 사용 부탁드립니다.