[JavaScript] HTML Input Text에 숫자 입력시 자바스크립트 정규식을 이용한 자릿수 제한

조건 

 1. Textbox에 숫자만 입력 받는다.

 2. 입력받은 숫자는 1000 이하의 숫자만 받는다.

 3. 소수점은 둘째자리까지만 받는다.

 

<input type="text" onkeypress="return isNumberKey(event)" />

 

    function isNumberKey(evt) {

        var charCode = (evt.which) ? evt.which : event.keyCode;

        if (charCode != 46 && charCode > 31 && (charCode < 48 || charCode > 57))

            return false;

 

        // Textbox value       

        var _value = event.srcElement.value;       

 

        // 소수점(.)이 두번 이상 나오지 못하게

        var _pattern0 = /^\d*[.]\d*$/; // 현재 value값에 소수점(.) 이 있으면 . 입력불가

        if (_pattern0.test(_value)) {

            if (charCode == 46) {

                return false;

            }

        }

 

        // 1000 이하의 숫자만 입력가능

        var _pattern1 = /^\d{3}$/; // 현재 value값이 3자리 숫자이면 . 만 입력가능

        if (_pattern1.test(_value)) {

            if (charCode != 46) {

                alert("1000 이하의 숫자만 입력가능합니다");

                return false;

            }

        }

 

        // 소수점 둘째자리까지만 입력가능

        var _pattern2 = /^\d*[.]\d{2}$/; // 현재 value값이 소수점 둘째짜리 숫자이면 더이상 입력 불가

        if (_pattern2.test(_value)) {

            alert("소수점 둘째자리까지만 입력가능합니다.");

            return false;

        }     

 

        return true;

    }

 

 

참고

원래는 아래와 같이 Input Text 의 onkeyup 이벤트 아래 함수를 호출해 처리할라 했으나,

키보드 연타시 가끔 이벤트가 먹히는 현상이 있어 위와같이 처리함.

<input type="text" onkeyup="return checkMaxNum(event)" />

 

function checkMaxNum(evt) {

    var _pattern = /^(\d{1,3}([.]\d{0,2})?)?$/;

    var _value = event.srcElement.value;

    if (!_pattern.test(_value)) {

        alert("1000 이하의 숫자만 입력가능하며,\n소수점 둘째자리까지만 허용됩니다.");

        event.srcElement.value = event.srcElement.value.substring(0,event.srcElement.value.length - 1);

        event.srcElement.focus();

    }

}

  

[출처] [ javascript ] HTML Input Text에 숫자 입력시 자바스크립트 정규식을 이용한 자릿수 제한|작성자 wow0815