생계유지형 개발자/HTML+CSS+JS

[Javascript] input 입력상자에 숫자만 입력하기

이 가을 2020. 6. 8. 10:08
<!-- HTML -->
<input class="form-control numeric-only" type="text"/>
<textarea class="form-control numeric-only" rows="20" cols="60"></textarea>

<script>
/** jQuery */
$('.numeric-only').keyup(function(e){
    regNumber = /^[0-9]*$/; 
    var str = $(this).val(); 
    // 정규표현식 활용하여 입력된 글자가 숫자가 아닐 경우, 해당 문자 삭제
    if(!regNumber.test(str)) {
        var res = str.substring(0, str.length-1); 
        $(this).val(res);
    }
});
</script>

 

※ <input type="number"/> 를 사용하지 않는 이유

type="number" 속성은 알파벳 e를 문자가 아닌 지수로 인식하여 e가 입력된다.

오로지 숫자만 입력하고 싶을 때 위의 방식을 사용한다.