[Javascript] 자바스크립트(JS) - input 텍스트에 숫자만 입력

웹 페이지 개발 중에 input Text에 숫자만 입력하는 부분이 많이 있습니다. 그중에 자바스크립트(Javascript) 방법 중 가장 많이 사용되는 방법을 알아보도록 하겠습니다. 

 

자바스크립트(Javascript)의 정규식 사용

자바스크립트(Javascript)의 oninput 이벤트 속성에 넣어서 정규식을 입력하는 방법입니다.

<input type="text" 
    oninput="this.value = this.value.replace(/[^0-9.]/g, '').replace(/(\..*)\./g, '$1');" />

 

또 하나는 자바스크립트(Javascript)의 onKeup 이벤트 속성에 정규식을 입력하는 방법입니다.

<input type="text" onKeyup="this.value=this.value.replace(/[^0-9]/g,'');"/>

 

자바스크립트(Javascript)의 함수 사용

자바스크립트(Javascript)의 onkeypress 이벤트를 사용하여 키보드 이벤트 keycode를 제어함으로써 숫자만 입력을 가능하도록 하는 방법입니다.

<input type="text" onkeypress="checkNumber();"/>

function checkNumber(){
	if(event.keyCode < 48 || event.keyCode > 57){
		event.returnValue = false;
	}
}

 

자바스크립트(Javascript) 이외 방법

자바스크립트(Javascript)의 방법이 아닌 다른 방법들도 알아보도록 하겠습니다.

//input type을 number으로 지정
<input type='number'></input>


//pattern 속성을 활용하기
<form>
  <input type="text" pattern="[0-9]+">
  <input type='submit'>
</form>