input태그에서 숫자만 특정 범위로 입력 받기 > M스토리

전체목록 애플님의 스토리목록

input태그에서 숫자만 특정 범위로 입력 받기

2024.03.12 15:48

애플M스토리 M채널 쪽지보내기

M스토리 M채널 쪽지보내기

input 태그를 이용해서 숫자만 입력을 받을 필요가 있을 경우가 있습니다.

이 때, type을 number만 지정하면 쉽게 숫자만 받을 수 있습니다.

<input type="number" name="test">

type이 number일 때 첫자는 문자 입력이 될 수도 있습니다.

상황에 따라 숫자의 범위가 필요한 경우가 있습니다.

이때도 min, max를 이용해서 아래와 같이 쉽게 적용할 수 있습니다. 100~1000 사이의 숫자

<input type="number" name="test" min="100" max="1000">

하지만, 위와 같은 경우 사용자 입장에서 다른 표기가 없다면 어느 범위의 숫자를 입력할 수 있는지 등의 불편함이 있습니다.

그래서 아래와 같이 스크립트를 이용해서 잘못된 값을 입력했을 경우 메세지를 보여주고 정상적인 입력값을 넣을 수 있게 할 수 있습니다.

name이 test인 input 태그에서 300~1000 사이의 숫자만 입력하게 한다면 아래와 같습니다.

input태그는

<input type="number" name="test">

스크립트 부분은 아래와 같습니다.

<script> 
	$(document).on("keyup", "input[name='test']", function() { 
		var num = $(this).val(); 
 
		if(num.replace(/[0-9]/g, "").length > 0) { 
			alert("숫자만 입력해 주세요."); 
			$(this).val(''); 
		} 
 
		if(num > 300 && num < 1000) { 
			alert("300~1000 범위의 숫자만 입력해 주세요."); 
			$(this).val(''); 
		} 
	}); 
</script>