[JavaScript] input, textarea 등 입력창에 숫자만 입력 받기

보통 input 창에 숫자를 입력 받을 때는 input type="number", ime-mode:disabled 으로 한글 입력을 방지한 후 사용합니다.

<input type="number" style="ime-mode:disabled;">

결과화면)

그러나 이 방법은 브라우저마다 다르게 적용되거나 input 태그에 한해서만 사용할 수 있는 등의 단점이 있고

오른쪽에 생기는 화살표 등 디자인 상의 문제로 사용하기 난감한 경우가 종종 생기곤합니다.

이런 경우, 자바스크립트로 해결하는 방법을 소개해드리겠습니다.

- 자바스크립트 onkeydown, onkeyup 이벤트를 이용하여 입력창에 숫자만 입력받는 방법

<script>
function onlyNumber(event){
    event = event || window.event;
    var keyID = (event.which) ? event.which : event.keyCode;
    if ( (keyID >= 48 && keyID <= 57) || (keyID >= 96 && keyID <= 105) || keyID == 8 || keyID == 46 || keyID == 37 || keyID == 39 ) 
        return;
    else
        return false;
}
 
function removeChar(event) {
    event = event || window.event;
    var keyID = (event.which) ? event.which : event.keyCode;
    if ( keyID == 8 || keyID == 46 || keyID == 37 || keyID == 39 ) 
        return;
    else
        event.target.value = event.target.value.replace(/[^0-9]/g, "");
}
</script>
 
<input type="text" onkeydown='return onlyNumber(event)' onkeyup='removeChar(event)'>
 
<textarea onkeydown='return onlyNumber(event)' onkeyup='removeChar(event)'></textarea>

결과화면)

이렇게 자바스크립트를 이용하면, input 태그 뿐만 아니라, textarea 에도 사용할 수 있다는 장점이 있습니다.