스토리아
input태그에서 숫자만 특정 범위로 입력 받기
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>
댓글목록
등록된 댓글이 없습니다.