input type이 number일 때 입력 글자 수 제한하기
input type이 text일 때는 maxlength의 값만 주면 간단하게 해결 되지만
input type이 number 일 때는 maxlength가 정상 작동하지 않는다.
이럴 때는 input 속성의 oninput과 간단한 스크립트를 활용해서 해결 할 수 있다.
※ 예제) 생년월일을 입력하는 필드에 6자리로 입력 글자 수 제한하기
1. HTML
<input class="form-control" type="number" placeholder="생년월일 6자리 ex)910504"
maxlength="6" oninput="numberMaxLength(this);"/>
2. Script
<script>
function numberMaxLength(e){
if(e.value.length > e.maxLength){
e.value = e.value.slice(0, e.maxLength);
}
}
</script>
input에 숫자를 입력할 때 특정 값 이하 (ex. 최대 150) 로만 입력 가능해서 그 이상으로 입력하면 알러트가 뜨면서 최대값 (ex.150) 으로 변환되게 할 수 있을까요?
<script>
$(function() {
//금액부분 숫자만 입력받음
$('#wr_2').keypress(function(event) {
if (event.which && (event.which > 47 && event.which < 58 || event.which == 8)) {
if($('#wr_2').value > 123) {
alert('123이상은 입력이 안됩니다!');
}
} else {
alert('숫자만 입력 가능합니다!');
}
})
});
</script>
이렇게 했더니 숫자만 입력 가능합니다는 뜨는데 숫자 123 이상은 입력이 안됩니다는 안뜨네요
비밀번호등을 받기 위해 숫자나 특정 단어 하나씩 입력하고 다음칸으로 이동하는 형태의 UI를 많이 접할 수 있습니다.
해당 포스팅에서는 하나의 Input태그마다 입력을 받으면 다음칸으로 이동하고 숫자만 받는 형태를 작성해보겠습니다.
단순하게 maxlength와 number값 타입을 지정하더라도 영문 'e' 또는 한글 자음 모음등이 입력되는 현상😓을 볼 수 있는데, 정규식과 사용할 수 있는 이벤트등을 활용하여 처리하였습니다.😋
좀 더 좋은 깔끔한 방식이 있다면 댓글 부탁드립니다!🙆♀️
<input type="tel" maxlength="1" min="0" max="9" onlyNumber>$(function(){ $(document).on("keypress keyup keydown", "input[onlyNumber]", function(e){ console.log(e.which); if(/[a-z|ㄱ-ㅎ|ㅏ-ㅣ|가-힣]/g.test(this.value)){ //한글 막기 e.preventDefault(); this.value = ""; }else if (e.which != 8 && e.which != 0 //영문 e막기 && e.which < 48 || e.which > 57 //숫자키만 받기 && e.which < 96 || e.which > 105){ //텐키 받기 e.preventDefault(); this.value = ""; }else if (this.value.length >= this.maxLength){ //1자리 이상 입력되면 다음 input으로 이동시키기 this.value = this.value.slice(0, this.maxLength); if($(this).next("input").length > 0){ $(this).next().focus(); }else{ $(this).blur(); } } }); });태그 input에 type을 tel로 한 이유는 모바일 환경에서 넘버패드로 먼저 동작하도록 하기 위해 처리하였고, input태그 내부에 onlyNumber라는 속성이 있으면 동일하게 동작하도록 처리하였습니다.
마지막 else if문에서 길이를 체크하고 maxlength값만큼 커지거나 같아지면 다음 input이 있는지 체크 후 자동으로 포커싱하는 스크립트입니다.
동작테스트는 아래 codePen⌨을 활용해주세요!
See the Pen Get one number by one by myhappyman (@myhappyman) on CodePen.
HTML에서 input 태그의 타입 중 하나인 number 타입을 사용할 때
maxlength 속성을 이용하여 입력 가능한 숫자의 수를 정하려고 하지만,
적용이 잘 되지 않았습니다.
검색을 해보니 input type='number'의 경우
maxlength가 작동되지 않는 사례를
발견할 수 있었고,
해결방법 또한 알 수 있었습니다.
해결 방안
바로 JavaScript를 이용하여 입력 글자의 수를 조절할 수 있습니다. 아래는 number 타입의 input 태그입니다.
<input type="number" maxlength="8"/>maxlength는 8로 설정하였지만 그 이상 입력되는 게 문제입니다.
이럴
경우 JavaScript를 사용하여 해결할 수 있는데, 아래와 같이 input 태그에 oninput을 할 경우 연결할 메서드를 선언 합니다.
코드 분석
<input type="number" maxlength="8" oninput="maxLengthChk(this)"/>
타입이
"number"인 input 태그에 maxlength="8" 속성을 추가해 8자리까지 입력 가능하게 선언합니다.
또한, oninput시 발생할 메서드인 maxLengthChk(this)를 선언합니다.
function maxLengthChk(object){
if (object.value.length > object.maxLength){
object.value = object.value.slice(0, object.maxLength);
}
}
스크립트가 선언된 부분에 input 태그에 명시한 maxLengthChk메서드를 생성합니다.
object.value.length > object.maxLength
위 코드를 통해 input 태그의 입력된 값의 길이와 선언된 최대 허용 길이수를 비교하게 됩니다.
object.value = object.value.slice(0, object.maxLength);
위 코드를 통하여 입력된 값의 길이가 더 클 경우 slice메서드를 사용하여 잘라내어 나타내게 됩니다.
위에서는 oninput 이벤트를 사용하였지만, 상황에 따라 title 등의 이벤트를 사용하는 방법도 고려할 수 있습니다.