Javascript로 숫자만 입력받기

 

Javascript 를 사용하여 숫자만 입력받는 코드입니다.

 

 

1. JQuery 사용

$(document).on("input", "#numericInput", function(){
    let value = $(this).val();
    let newValue = parseInt(value.replace(/[^0-9]/g, ''), 10);
    newValue = isNaN(newValue)?0:newValue;
    $(this).val(newValue);
});

 

이 코드는 입력 필드에서 input 이벤트가 발생할 때마다 입력 값의 숫자 외의 모든 문자를 삭제합니다. 이를 통해 입력 필드에는 숫자만 남게 됩니다.

또한, 숫자 이외의 모든 입력은 무시됩니다. 이를 통해 유효한 입력만 받을 수 있게 됩니다.

 

1.1. input 이벤트란?

input 이벤트는 HTML5에서 도입되었습니다. HTML5는 2014년에 공식적으로 표준으로 채택되었으며 이 이벤트는 이 표준의 일부로 도입되었습니다. 따라서 HTML5 이후의 브라우저에서 이 이벤트를 사용할 수 있습니다.

예전에는 keypress, keyup, keydown 등의 이벤트를 사용하여 키 입력을 처리하는 것이 일반적이었습니다. 그러나 input 이벤트는 더 간편하게 사용자 입력을 처리할 수 있는 방법을 제공합니다. input 이벤트는 사용자가 입력 필드에 어떤 작업을 수행할 때마다 발생하며, 텍스트 입력, 붙여 넣기, 잘라내기, 삭제 등의 모든 변화를 감지할 수 있습니다.

input 이벤트의 장점은 다음과 같습니다:
텍스트 입력 뿐만 아니라 복사 및 붙여 넣기 작업과 같은 텍스트 변경 작업도 감지할 수 있습니다.
브라우저의 자동완성 및 입력 예측 기능과도 호환됩니다.
간단하게 사용자 입력을 모니터링하고 처리할 수 있어 코드가 더 간결해집니다.

 

2. Javascript  사용

const numericInput = document.getElementById("numericInput");
numericInput.addEventListener("input", function(event) {
    const value = this.value;
    const newValue = parseInt(value.replace(/[^0-9]/g, ''), 10);
    newValue = isNaN(newValue)?0:newValue;
    if (value !== newValue) {
      this.value = newValue;
    }
});

이 코드는 입력 필드에서 input 이벤트가 발생할 때마다 입력 값의 숫자 외의 모든 문자를 삭제합니다. 이를 통해 입력 필드에는 숫자만 남게 됩니다.
또한, 숫자 이외의 모든 입력은 무시됩니다. 이를 통해 유효한 입력만 받을 수 있게 됩니다.