input 창에 숫자만 입력하기 > 기술자료

• 목록

input 입력창에 숫자만 입력되도록 하는 방법입니다.

샘플 : https://www.happyjung.com/demo/css/onlynumber.html


[ 방법.1 ]
숫자이외의 값이 들어오면 등록이 안됩니다.
정상 입력된 숫자는 유지가 됩니다.

<script type="text/javascript">
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="number" pattern="[0-9]*" placeholder="숫자만 입력"  onkeydown="return onlyNumber(event)" onkeyup="removeChar(event)" style="ime-mode:disabled;">



[ 방법.2 ]
숫자 이외의 것이 입력되면 input 창이 리셋 됩니다.

<script>
function onlyNumber(obj) {
    obj.value = obj.value.replace(/\D/g, '');
}
</script>

<input type="number" pattern="[0-9]*" onkeyup="onlyNumber(this)" style="ime-mode:disabled;">



참고자료
http://webskills.kr/archives/310
https://sir.kr/qa/281594?