HTML5 / input type="number" maxlength 키보드 입력 제한하기

input number 키보드 입력 제한(자리수 제한, maxlength)

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

input type number는 maxlength 어트리뷰트가 없다. 숫자 최소 최대값을 지정하는 min, max는 있지만 입력 자체는 가능하며 submit이 불가능할 뿐이다.

그런데 카드번호 입력 등의 form에서 자리수 입력을 제한해달라는 요청이 있었다. 다음처럼 input 이벤트를 잡아 해결하였다.

해결

type이 number이며 maxlength 어트리뷰트가 있는 element를 찾아 입력 자리수를 제한한다.

$('input[type=number][maxlength]').on('input', function(ev) {
    var $this = $(this);
    var maxlength = $this.attr('maxlength');
    var value = $this.val();
    if (value && value.length >= maxlength) {
        $this.val(value.substr(0, maxlength));
    }
});