HOME > html

[html] input 태그 number 타입의 maxlength 최대 자릿수 설정하기

Last Modified : 2022-04-28 / Created : 2022-04-28
3561
View Count
안녕하세요! 오늘부터는 포스팅에 앞서서 항상 인사를 먼저 드리고 글을 작성하려고 합니다^^ 최근 여러 사유로 포스팅을 올리지 못했는데요 ~ 앞으로는 좀 더 자주 올릴 수 있도록 노력할테니 지금처럼 많은 관심 부탁 드립니다. 그럼 계속해서 작성해 볼께요!


# HTML input 태그에서 maxlength 사용하기, 문자열 최대 길이 설정
입력폼에서 가장 많이 사용되는 input 태그 ~ input 태그를 사용하여 방문자로 부터 여러 정보를 입력 받아 서버에 전송 받을 수 있습니다. 이 때 input 태그에 사용되는 여러 가지 어트리뷰트가 존재하는데요 ~ 여기서 최대 길이를 설정하는 방법은 무엇일까요? 바로 maxlength입니다.
<input type="text" placeholder="최대 길이 없음" />
<input type="text" placeholder="최대 길이 6으로 설정" maxlength="6" />

위 코드를 아래에 구현해볼까요?
<input type="text" placeholder="최대 길이 없음" />
<input type="text" placeholder="최대 길이 6으로 설정" maxlength="6" />

여기서 두 번째 입력폼의 input 태그는 오직 6자리의 문자값만을 최대값으로 가지게 됩니다. maxlength 값이 설정되어 있기 때문입니다.

maxlength // 최대 입력 받을 수 있는 문자열의 길이를 설정


그렇다면 이 속성은 언제 사용할까요? 매우 다양하게 사용됩니다. 예를들어 이메일을 입력 받을 때 최대 값을 30으로 설정할 수 있습니다. 30 자리를 넘어가는 이메일 주소는 입력이 불가능하겠죠? 아니면 생년월일을 20220428처럼 8자리로 제안하여 사용할 수 도 있겠죠. 아니면 핸드폰 자릿수 만큼 설정하는 것도 가능합니다. 01012345678처럼 11자리를 최대값으로 설정할 수도 있죠.

위에서 세 가지 예를 들었는데요 아래에 나열해보죠.

1. 이메일
2. 생년월일
3. 핸드폰 번호


여기서 첫 번째의 이메일 그리고 나머지인 생년월일, 핸드폰 번호는 차이점이 있는데요... 바로 숫자를 사용하는가의 여부입니다.


! 숫자를 사용하는 경우의 최대 자릿수 설정 방법
input 태그는 숫자 타입의 설정이 가능합니다. 숫자 타입을 설정할 경우 숫자만 입력이 가능합니다. 이런 이유로 숫자만 입력 받는 경우에는 간단하게 type="number"를 사용하는 것이 좋은 방법이죠.
<input type="number" maxlength="8" />

그런데 문제는 여기서 발생합니다. 위에서 maxlength가 정상 동작할까요? 결론은 아닙니다. 그 이유는 숫자 타입의 경우 문자열에 사용하는 maxlength 어트리뷰트(속성)가 동작하지 않기 때문입니다. 실제로 입력해보면 제한없이 계속 입력됩니다. 어떻게 해야 해결될까요?

방법은 몇 가지가 있습니다.

1. 정규표현식(regex)을 pattern 어트리뷰트에 maxlength와 함께 사용하기
2. 자바스크립트에서 키 입력 이벤트로 제어하기
3. min, max 어트리뷰트를 사용하기

여기서 바로 첫 번째 방법이 가장 선호하고 해결 가능한 최선의 방법입니다. pattern 어트리뷰트는 input태그에 정규표현식을 사용하여 입력 받을 수 있는 값을 제한하는 것이 가능하죠. 이를 사용하여 아래와 같이 코드를 작성해보겠습니다.
<input type="text" pattern="\d*" maxlength="8" />

이제 위 코드를 아래에 구현해봅니다.
<input type="text" pattern="\d*" maxlength="8" />

어떤가요? 숫자만 입력되며 8자리 제한된 것을 알 수 있습니다. 이 방법이 가장 효과적인 방법입니다. 다만 모바일 환경에서 pattern 속성이 지원되지 않을 수 있을 수 있다는 단점이 존재합니다. 그럼에도 가장 좋은 방법입니다.


! 그 외의 방법들 알아보기
위에서 두 번째 방법은 이벤트를 사용하는 방법입니다. 즉 키를 누를 때 입력된 값의 자릿수를 검증하면서 확인하는 방법입니다. 이 방법도 실제 코드를 작성하면 간단한 방법임을 확인할 수 있습니다. 다만 아래의 방법이 더 간단합니다.

min, max 어트리뷰트는 숫자 타입의 input에서만 사용 가능합니다. min, max는 각각 최소 최대값을 의미하죠~
만약 자리수를 최소 1부터 8까지만 허용한다면? 아래와 같이 적용할 수 있습니다.
<input type="number" min="0" max="99999999" />

위 코드를 실제로 적용하면 아래와 같이 나타나게 됩니다. 과연 잘 동작할까요?
<input type="number" min="0" max="99999999" />

매우 간단한 방법이지만 문제가 있습니다. max값이 8자리까지만 설정되어 있지만 입력은 그 이상도 가능합니다. 다만 input 태그 내부에서 값을 올리거나 내리는 버튼을 누르거나 키보드 방향키를 누를 경우에만 min, max가 적용된다는 단점이 있습니다. 또 다른 단점이 있습니다. 무엇이냐... 바로 최대값을 넘거갈 경우 그 값이 무조건 설정된 최대값으로 변경된다는 점입니다. 예를들어 최대값 max가 1000이라면? 10000, 100000 또는 그 이상을 입력해도 무조건 1000이 입력됩니다. 단순히 입력만 안되는 것이 아니라 최대값으로 변경되는게 살짝 아쉬운 점입니다.
 

여기까지 input의 number 타입에서 최대 자릿수 설정 방법에 대하여 간략하게 알아보았습니다.
Author ByEnSSo

이전 글 보기

Post thumbnail [html] base 태그 사용 방법 알아보기