[JavaScript] input 소수 입력 (자리수 제한)

입력창에 금리 등의 값을 입력하는 경우 숫자, 소수점만 입력되도록 하면 좋다.

inputmask 플러그인을 이용해도 되지만 플러그인을 사용할 수 있는 상황이 아니라면 직접 구현해야 한다.

 

이벤트 하나만 이용해서 해보려고 했는데 좀 무리가 있어서 최소 2개, 넉넉하게 3개는 이용해야 했다.

keydown 이벤트로 직전 값을 기억해두고 input 이벤트로 현재 입력값을 정규식을 통해 확인하여 적절한 값이면 입력되도록 하고, 적절하지 않으면 방금 keydown 이벤트로 저장한 값으로 되돌린다.

여기까지 해도 충분하지만 마지막에 change 이벤트를 이용해 입력을 소수점까지만 했을 경우 그 뒤에 0을 붙여주는게 좋아보였다.

 

<input type="text" id="testInput" />

<script>
    function inputFixed(el, digit, decimal) {
        var val = "";
        el.addEventListener("keydown", function (e) {
            val = e.target.value;
        });
        var regexInput = RegExp("(^[0-9]{0," + digit + "}$)|(^[0-9]{1," + digit + "}[.][0-9]{0," + decimal + "}$)");
        // /(^[0-9]{0,2}$)|(^[0-9]{1,2}[.][0-9]{0,2}$)/  -> 39.02
        el.addEventListener("input", function (e) {
            if (e.target.value === ".") {
                e.target.value = "0.";
            } else if (e.target.value && !regexInput.test(e.target.value)) {
                e.target.value = val;
            }
        });
        var regexChange = RegExp("^[0-9]{0," + digit + "}[.]$");
        el.addEventListener("change", function (e) {
            if (e.target.value && regexChange.test(e.target.value)) {
                e.target.value = e.target.value + "0";
            }
        });
    }
    inputFixed(document.getElementById("testInput"), 3, 2);
</script>