모바일(핸드폰) Input태그 숫자 또는 영어 키패드 (숫자만 입력, 영어만 입력)

하이브리드 앱 또는 웹앱을 개발하다 보면 요구사항에 영어부터 입력 할 수 있게 해달라던가 숫자 키패드만 보여달라던가 요구 할 때가 있다.

 

처음에 html로 키패드를 컨트롤 할 수 있나 .. 하였지만 .. 가능하였다.

 

숫자는 input 태그의 type을 number로 하면 가능하고, 영어는 input type을 email로 하면 된다.

 

숫자 키패드

안드로이드는 type을 number로만 해주면 숫자 키패드가 불러와 지지만,

ios는 pattern=”\d*” 을 추가해 줘야한다.

<input type="number" pattern=”\d*”>

이렇게 하면 숫자 키패드는 불러와 지지만 크롬에서 볼 때 'e' 와 '+','-' 가 입력이 가능하다..

'e', '+', '-' 를 제외하고 숫자만 입력 가능하게 하고싶다면 keypress 이벤트를 추가해 주면된다.

(keypress 이벤트는 버튼을 눌렀을 때 동작)

 

방법 1

<input id="num" type="number" pattern=”\d*” >


<script>
	document.getElementById('num').addEventListener('keydown',function(e){
		if(!((e.keyCode > 47 && e.keyCode < 58) || 
		e.keyCode == 8 || e.keyCode == 37 || e.keyCode == 39)) {
			e.preventDefault();
		}
	});
</script>

방법 1은 id에 이벤트를 주는 방법이다.

숫자 키코드는 47~58 이고, 8, 37, 39는 Backspace, <-, -> 방향키 입력을 입력 할 수 있도록 추가해 주었다.

e.preventDefault() 는 이벤트를 취소하는 것인데 이벤트를 취소해 주어야 숫자가 아니면 입력되지 않는다.

 

방법 2

<input type="number" pattern=”\d*” onkeypress="if(!numCk(event.keyCode)) return false;">

<script>
	function numCk(cd){
		if(cd > 47 && cd < 58) return true;
		else return false;
	}
</script>

방법 2는 태그에 onkeypress를 추가하여 함수를 호출하는 방법이다.

둘 다 똑같은 기능이니 원하는 방법대로 사용하면 된다.

 

그리고, number태그는 maxlength가 되지 않는다..

maxlength를 사용하려면 아래와 같이 return 시키거나 이벤트 취소를 시켜줘야 된다.

	<script>
		document.getElementById('num').addEventListener('keydown',function(e){
			if(!((e.keyCode > 47 && e.keyCode < 58) || 
			e.keyCode == 8 || e.keyCode == 37 || e.keyCode == 39)) {
				e.preventDefault();
			}

			if(this.value.length >= 5){
				e.preventDefault();
			}
		});

		function numCk(cd,tag){
			if(tag.value.length >= 5) return false;
			if(cd > 47 && cd < 58) return true;
			else return false;
		}

	</script>

 

영어 키패드

input 클릭 시 영어키패드를 올라오게 하는 방법은 간단하다.

type을 email이나 url로 해주면 영어 키패드를 올려준다.

<input type="email" maxlength="5">
<input type="url" maxlength="5">

영어만 입력

<input type="email" maxlength="5" oninput="this.value=this.value.replace(/[^a-z]/gi,'');">

 

 

영어만 입력외 전화번호, email 정규식은 아래링크에서 참고하면 된다.

https://ming9mon.tistory.com/81

jQuery 회원가입 정규식표현 유효성 검사(자주쓰는 정규표현식 정리)