[Hybrid, Web] 키 입력시 숫자만 가능하도록 세팅.

오래만에 글 올리네요.

모바일 웹 그리고 일반적인 웹의 input tag 에서 키 입력 제어하는 방법입니다.

모바일 웹의 경우 type 으로 숫자키보드를 보이게 하거나, pattern 에 정규식을 넣어서 숫자를 제어하는 경우가 많습니다.

하지만! 가끔씩.....적용이 안되는 단말기가 있더군요. 특히 type의 경우 tel로 해놓아도 커스텀 키보드의 경우는 지원되지 않는 경우도 발생합니다.

키 입력시 자바스크립트로 제어 코드를 넣는다면 간단히 해결 가능합니다.

아래와 같은 input tag에....

<input type="tel" title="TEST용" style="width:100%; ime-mode:disabled;" maxlength="13" onkeypress="validate(event)">

onkeypress 이벤트에 validate 라는 function을 넣어주면 됩니다.

function validate() {
	if (event.keyCode >=48 && event.keyCode <= 57 ) {
		return true;
	} else {
		event.returnValue = false;
	}
}

keyCode 48~57까지가 0~9이므로, 숫자가 입력 되었을 경우, 정상적으로 동작하고,

그 이외 코드가 들어 왔을때는 returnValue를 false로 줌으로써 해당 키 입력 이벤트에 대한 값을 무시해 버립니다.

이렇게 해서 간단하게 제어가 가능합니다.