[자바스크립트] 입력창에 숫자만 입력하는 방법

개요

입력창에 숫자만 입력하는 방법을 소개 합니다.

상세내용

입력 창에서 전화번호나 생일을 입력받을 때 숫자만 입력하도록 설정을 할 수 있습니다. html 속성, 정규화와 자바스크립트를 이용하여 숫자만 입력받는 것을 알아보겠습니다.

 

방법 1

html 속성 중 "oninput"이 있습니다. 이 속성을 이용하여 숫자만 입력되도록 하는 코드입니다. 

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

반응형

위 코드를 아래와 같이 입력 창에 추가하시면 됩니다.

이렇게 입력하면 숫자 외의 키는 공백 처리가 되어 입력이 되지 않습니다. 입력되지 전에 처리하는 방식입니다.

 

방법 2

html 속성 중 "onkeyup"이 있습니다. 이 속성을 이용하여 숫자만 입력되도록 하는 코드입니다. 

Function checkNumber(){
	Var objEx = event.srcElement;
	Var numPattern= /(^0-9].])/;
	numPattern = objEv.value.match(numPattern);
	If(numPattern != null){
		objEv.value = "";
		objEv.focus();
		Return false;
		}else {
		Return true;
	}
}

반응형

위의 코드를 아래 코드처럼 사용하시면 됩니다.

<input type="text" id="test" name="test" onkeyup="checkNumber();" />

 

키는 입력은 되지만 숫자 외의 키가 입력되었을 경우 입력 내용을 모두 삭제합니다. 

 

맺음말.

사용하기 에는 "방법 1"을 추천합니다. 입력되고 지우는 것보다 입력이 안되게 하는 것이 예외 처리에 더 효율적이기 때문입니다. 

이상입니다.