[HTML/Javascript] input 태그, 숫자만 입력 및 개수 제한

회원 가입 페이지 만들거나 할 때 

전화번호 입력 시 

 

숫자만 제한해서 입력 받아야 하는 경우가 있다. 

 

간단하게 이렇게만 입력 하고 처리되면 좋은데 

<input type="number" maxlength="4" />

TEST 

 

 

input 태그 number 타입에는 maxlength 값이 먹지가 않는다. 

 

 

이럴땐 js 함수를 사용해서 같이 작업 해준다. 

<script type="text/javascript">
		
	    function lengthChk(object){
	    	if(object.value.length > object.maxLength){
	    	   object.value = object.value.slice(0, object.maxLength);
			}
		}
	
</script>

<div>
    숫자제한 입력 : <input type="number" maxlength="4" oninput="lengthChk(this);" />
</div>

 

대략 maxlength 보다 길이가 클 경우 잘라버린다는 뜻이다. 

 

 

input text 타입에 숫자만 입력 하고 싶은 경우에는 

 

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

 

이렇게 정규식으로 숫자만 적용되도록 기입하면 된다. 

 다만 모양은 이런식으로 표현되니 참고 해야함!

 

여기에는 그대로 maxlength가 먹는다 

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

 

 

TEST