Input에 숫자만 입력되게 하기

구글링을 하다보니 다양한 분들의 다양한 방법들이 존재를 했지만, 내가 딱 원하는 걸 찾지 못해서 궁리 끝에 아래와 같은 소스를 만들어 보았습니다.

 

keycode Control을 통해 입력되는 키를 제어 하는 방식으로, 소스를 보시면 원하대로 커스텀해서 사용할 수 있을 것입니다.

 

일단 저는 아래와 같은 정도로 기능 정의를 하고, 만들어 보았습니다.

1) 숫자 입력만 필요하고,

2) 영문 및 한글은 입력이 되지 않아야 하며,

3) 소수점을 표현하되, 소수점으로 시작하거나 소수점이 두번찍히면 안되고,

4) 음수를 표현할 수 있어야 한다.

5) 입력된 숫자의 수정을 위한 키 backspace, delete, shift, home, end 등은 입력이 가능하도록 한다.

    (shift + end 로 전체 선택을 하는 경우 때문에 ^^;;)

6) 스크립트에서 자리수 제한도 할 수 있도록..

 

<input type="text" class="formControl numberOnly" placeholder="">

<script>
    function onlyNumber(event, maxLength) {
        const keyCode = event.keyCode;
        const currentValue = event.target.value;

        // 허용된 키 코드
        const isNumber = (keyCode >= 48 && keyCode <= 57) || (keyCode >= 96 && keyCode <= 105); // 숫자 0-9
        const isBackspace = (keyCode === 8); // 백스페이스
        const isLeftArrow = (keyCode === 37); // 왼쪽 방향키
        const isRightArrow = (keyCode === 39); // 오른쪽 방향키
        const isDelete = (keyCode === 46); // Delete 키
        const isDot = (keyCode === 190 || keyCode === 110); // 마침표 (소수점)
        const isMinus = (keyCode === 189 || keyCode === 109); // 마이너스 기호
        const isShift = (keyCode === 16); // Shift 키
        const isHome = (keyCode === 36); // Home 키
        const isEnd = (keyCode === 35); // End 키

        // 현재 입력된 숫자의 길이
        const currentLength = currentValue.length;

        // 마이너스 기호 입력 처리: 첫 번째 자리에서만 허용
        const canInputMinus = (isMinus && currentLength === 0);

        // 허용된 키가 아닐 경우 또는 최대 길이를 초과할 경우
        if (!(isNumber || isBackspace || isLeftArrow || isRightArrow || isDelete || isDot || isShift || isHome || isEnd || canInputMinus) ||
            (isNumber && currentLength >= maxLength) ||
            (isDot && currentValue.includes('.'))) {
            event.preventDefault(); // 기본 동작 방지
        }
    }

    function checkForKoreanCharacters(event) {
        const currentValue = event.target.value;

        // 한글 정규 표현식
        const koreanRegex = /[ㄱ-ㅎ|ㅏ-ㅣ|가-힣]/;

        // 현재 값에 한글이 포함되어 있으면 삭제
        if (koreanRegex.test(currentValue)) {
            event.target.value = ''; // 값을 삭제
        }
    }

    // 최대 자리수 설정
    const maxLength = 10;

    // 입력 필드에 이벤트 리스너 추가
    const inputFields = document.querySelectorAll('.numberOnly');
    inputFields.forEach(inputField => {
        inputField.addEventListener('keydown', function(event) {
            onlyNumber(event, maxLength);
        });
        inputField.addEventListener('input', checkForKoreanCharacters); // 입력 이벤트 리스너 추가
    });
</script>

 

일단 테스트 한 바로는 자~~알 되는거 같습니다. ^^