자바스크립트로 숫자만 입력받는 방법

-

-

안녕하세요! 오늘은 자바스크립트를 활용해서 웹 페이지에서 숫자만 입력 받는 방법을 알려드릴게요.
간단한 방법으로, 숫자 이외의 문자는 입력되지 않도록 제한할 수 있어요. 이 기능은 예를 들어, 전화번호나 나이, 금액 등을 입력받는 입력창에서 유용하게 사용할 수 있습니다.

자, 그럼 어떻게 구현할 수 있는지 한번 알아볼까요?

1. onKeyup 이벤트로 실시간 숫자 제한하기

첫 번째 방법은 onKeyup 이벤트를 사용하는 거예요. 
이 방법은 사용자가 키를 떼는 순간, 입력된 값을 실시간으로 확인하고 숫자만 남기게 해줍니다.

<input type="text" id="inputNumber" name="number" onkeyup="onlyNumber(event)" placeholder="숫자만 입력">
<script>
function onlyNumber(event) {
    var keyID = event.which || event.keyCode;

    // 숫자 키와 숫자패드 키만 허용
    if (
        (keyID >= 48 && keyID <= 57) || // 0-9 숫자
        (keyID >= 96 && keyID <= 105) || // 숫자패드 0-9
        keyID == 8 || // 백스페이스
        keyID == 46 || // 삭제
        keyID == 37 || // 왼쪽 화살표
        keyID == 39    // 오른쪽 화살표
    ) {
        return; // 유효한 키는 그대로 두고 종료
    } else {
        // 숫자가 아닌 문자는 삭제
        event.target.value = event.target.value.replace(/[^0-9]/g, "");
    }
}
</script>

 

위 코드에서 중요한 부분은 **replace(/[^0-9]/g, "")**인데요, 이 정규식을 통해 숫자 이외의 모든 문자를 찾아서 자동으로 제거해 줍니다.

2. input 이벤트를 사용해서 입력 중 실시간으로 처리하기

두 번째 방법은 input 이벤트를 사용하는 거예요. 
input 이벤트는 사용자가 값을 입력할 때마다 발생하는데요, 이걸 활용해서 실시간으로 숫자만 남기도록 할 수 있습니다.

<input type="text" id="inputNumber" name="number" oninput="removeChar(event)" placeholder="숫자만 입력">
<script>
function removeChar(event) {
    // 숫자 이외의 문자를 모두 제거
    event.target.value = event.target.value.replace(/[^0-9]/g, "");
}
</script>

이 방법도 실시간으로 숫자 외의 문자를 삭제하기 때문에 사용하기 쉽고 직관적이에요.

 

3. ime-mode로 입력 방식 제한하기

 

사실, **ime-mode**는 숫자만을 제한하는 데 직접적인 효과는 없어요. 하지만 이 스타일을 사용하면 한글 입력을 막을 수 있기 때문에, 영어와 숫자만 입력할 때 유용할 수 있답니다.

<input type="text" id="inputNumber" name="number" style="ime-mode:disabled;" oninput="removeChar(event)" placeholder="숫자만 입력">
<script>
function removeChar(event) {
    event.target.value = event.target.value.replace(/[^0-9]/g, ""); // 숫자만 남기기
}
</script>

 

이 방법은 한글 입력을 차단하고, 영어 및 숫자만 입력 가능하게 만들 수 있어요.

 

4. onkeydown 이벤트로 키 입력 자체 차단하기

이 방법은 조금 더 강력한 제어를 제공하는 방법이에요. 
onkeydown 이벤트를 사용해서 특정 키 입력 자체를 차단할 수 있습니다.

<input type="text" id="inputNumber" name="number" onkeydown="restrictInput(event)" placeholder="숫자만 입력">
<script>
function restrictInput(event) {
    var keyID = event.which || event.keyCode;

    // 숫자와 특수키(백스페이스, 삭제, 화살표키)만 허용
    if (
        (keyID >= 48 && keyID <= 57) || // 0-9 숫자
        (keyID >= 96 && keyID <= 105) || // 숫자패드 0-9
        keyID == 8 || // 백스페이스
        keyID == 46 || // 삭제
        keyID == 37 || // 왼쪽 화살표
        keyID == 39    // 오른쪽 화살표
    ) {
        return; // 유효한 키는 그대로 두고, 나머지는 차단
    } else {
        event.preventDefault(); // 나머지 키는 입력되지 않게 막음
    }
}
</script>

 

이 코드에서는 사용자가 숫자 외의 키를 누를 경우 입력을 아예 차단합니다. 
예를 들어, 알파벳이나 특수 문자는 입력되지 않게 되죠.

5. 모든 방법을 종합해서 활용하기

앞서 소개한 방법들은 각각의 상황에 따라 유용하게 사용할 수 있는데요, 필요에 따라 **onKeyup**과 input 이벤트를 동시에 활용하거나, onkeydown 이벤트로 더 강력한 제어를 할 수도 있어요.

<input type="text" id="inputNumber" name="number" oninput="removeChar(event)" onkeyup="onlyNumber(event)" placeholder="숫자만 입력">
<script>
function onlyNumber(event) {
    var keyID = event.which || event.keyCode;

    if (
        (keyID >= 48 && keyID <= 57) || 
        (keyID >= 96 && keyID <= 105) || 
        keyID == 8 || 
        keyID == 46 || 
        keyID == 37 || 
        keyID == 39
    ) {
        return; // 유효한 키는 그대로 두고 종료
    } else {
        event.target.value = event.target.value.replace(/[^0-9]/g, ""); // 숫자만 남기기
    }
}

function removeChar(event) {
    event.target.value = event.target.value.replace(/[^0-9]/g, ""); // 숫자 이외의 문자는 모두 제거
}
</script>

 

자바스크립트를 활용하면 입력 값에 대한 제한을 쉽게 적용할 수 있어요.
숫자만 입력하고 싶을 때는 onKeyup, input, onkeydown 이벤트를 적절하게 활용하면 됩니다.
필요에 맞는 방법을 선택해서 적용하면, 사용자 입력을 깔끔하게 제어할 수 있답니다.

오늘도 코드 잘 작성하시고, 재미있는 웹 개발 하세요!