WebDescktop

Descktop Web Input number 타입의 속성 maxlength 사용

입력창 number 타입의 속성 maxlength 글자수 제한 설정

input 엘리먼트에는 기본적으로 maxlength 속성이 존재하는데, 이는 value 속성의 값을 maxlength 속성 값 이하로 최대 글자 수를 제한하는 기능 이다.

1
<input type="text" name="inputBox" maxlength="10">

그러나 type=”number” 에서는 maxlength 속성 기능이 동작하지 않는다.

1
<input type="number" name="inputBox" maxlength="10">

이유는 type이 number 인 input 엘리먼트는 기본적으로 maxlength 기능을 지원하지 않기 때문이다.

input 속성 API

해결방안

oninput 이벤트를 사용하여 별도의 스크립트로 처리
oninput 이벤트는 html5에서 추가된 이벤트로 데이터를 입력받았을 경우 발생된다.
onchange 이벤트 하고는 다르다.

1
2
3
4
5
function maxLengthCheck(selector) {
    if (selector.value.length > selector.maxLength) {
        selector.value = selector.value.slice(0, selector.maxLength);
    }    
}
1
<input type="number" pattern="[0-9]*" maxlength="2" oninput="maxLengthCheck(this)">

HTML custom data 속성 활용
HTML5일 경우에는 커스텀 data 속성을 활용하여 처리하면 HTML Validator 검사 시 문제가 되지 않는다. 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
function maxlengthNumber(selector, maxNum) {
    maxNum = (maxNum) ? maxNum : selector.dataset.maxlength;
    maxNum = parseInt(maxNum, 10);
    
    if ('oninput' in document.createElement('input')) {
        selector.addEventListener('input', function() {          
            if (this.value.length > maxNum) {
                this.value = this.value.slice(0, maxNum);
            }
        }, false);
    } else {
        if (maxNum) {
            selector.setAttribute('maxlength', maxNum);
        } else {
            selector.setAttribute('maxlength', selector.dataset.maxlength);
        }
    }
}
1
2
3
<input type="number" data-maxlength="2" pattern="[0-9]*" id="iptNumber"> <!-- 패턴1 -->

<input type="number" pattern="[0-9]*" id="iptNumber"> <!-- 패턴2 -->
1
2
3
maxlengthNumber(document.querySelector('#iptNumber')); // 패턴1

maxlengthNumber(document.querySelector('#iptNumber'), 2); // 패턴2
공유하기