html5 input type number maxlength 설정 ( 모바일 )에 대해서 알아본다.

 

input 에는 maxlength 속성이 있다.

 

이는 value 속성의 값을 maxlength 속성 값 이하로 제한하는 것이다.

 

 

대부분 아래와 같이 사용한다.

 

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

 

 

그런데 type="number" 에서는 maxlength 속성이 먹히지 않았다.

 

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

위 코드 실행 시 maxlength 가 적용되지 않음

 

 

그래서 이유를 찾아보다 다음과 같은 정보를 발견했다.

 



 

[이미지1]

[이미지1] 에서 알 수 있듯이 number 키워드 사용 시 maxlength 를 사용할 수 없다.

 

 

 

 * number 키워드에서 maxlength 를 대체할 방법 중 2가지

 

 

 

1. oninput 이벤트를 사용하여 별도의 스크립트로 처리

* oninput 이벤트는 html5에서 추가된 이벤트로 데이터를 입력받았을 경우 발생된다.

  onchange 함수와는 차이가 있다.

  oninput 이벤트 참고 : http://www.w3ii.com/en-US/tags/ev_oninput.html

 

사용방법 ( maxlength="10" 과 같은 효과 )

html

1
<input type="number" name="inputBox" maxlength="10" oninput="maxLengthCheck(this)">
cs

javascript

1
2
3
4
5
function maxLengthCheck(object){
    if (object.value.length > object.maxLength){
        object.value = object.value.slice(0, object.maxLength);
    }    
}
cs

* 태그 object 에서 maxlength 속성을 가져와서 script 로 직접 잘라주는 방법이다.

 

 

 

2. max, min 속성을 이용하여 처리

number 키워드 사용시 사용가능한 max, min 속성이 있다.

[이미지2]

[이미지2] 에서 보듯이 max, min 속성은 number 키워드 사용시 사용할 수 있다고 한다.

 

사용방법 ( maxlength="10" 과 같은 효과 )

html 

1
<input type="number" name="inputBox" min="0" max="9999999999">
cs

 

 

 



 

* 참고 : html5 input 태그 type 속성의 키워드

키워드 상태 데이터 타입 컨트롤 타입

hidden

Hidden 임의의 문자열 n/a

text

Text 줄바꿈 없는 텍스트 Text field

search

Search 줄바꿈 없는 텍스트 Search field

tel

Telephone 줄바꿈 없는 텍스트 A text field

url

URL IRI 절대경로 A text field

email

E-mail 이메일주소, 혹은 그것의 목록 A text field

password

Password 줄바꿈없는 텍스트(민감한 정보) Text field that obscures data entry (입력된 데이터를 감추는 텍스트 필드)

datetime

Date and Time 타임존이 국제표준시(UTC)로 설정된 날짜와 시간(년, 월, 일, 시, 분, 초, 분할된 초) A date and time control

date

Date 타임존 없는 날짜(년, 월, 일) A date control

month

Month 년월을 구성하는 타임존 없는 날짜 A month control

week

Week 주 를 나타내는 타임존 없는 주-년 및 주 번호 A week control

time

Time 타임존 없는 시간(시, 분, 초, 분할된 초) A time control

datetime-local

Local Date and Time 타임존 없는 날짜와 시간(년, 월, 일, 시, 분, 초, 분할된 초) A date and time control

number

Number 숫자 A text field or spinner control

range

Range 숫자이면서, 정확한 값이 큰 의미가 없다는 의미를 내포함 A slider control or similar

color

Color 8비트 RGB로 구성된 sRGB 색상 A color well

checkbox

Checkbox 미리 정의된 목록에서 가져온 0개 이상의 값 A checkbox

radio

Radio Button 열거된 값 A radio button

file

File Upload MIME 타입과, (선택적으로)파일명을 갖는 파일들 A label and a button

submit

Submit Button 열거된 값. 폼 제출을 시작하므로, 이것을 선택한 후에는 다른 값을 선택할 수 없음을 암시합니다. A button

image

Image Button 특정 이미지의 크기와 관련된 좌표. 폼 제출을 시작하므로, 이것을 선택한 후에는 다른 값을 선택할 수 없음을 암시합니다. Either a clickable image, or a button

reset

Reset Button n/a A button

button

Button n/a A button

 

 

 

(참고 : http://html5ref.clearboth.org/doku.php?id=html5:attribute:type_input#number_state)

 

 

 

 

 

 

 

by 개발자 CofS 2016.08.11 13:53
  • 2017.08.23 20:31 ADDR EDIT/DEL REPLY

    비밀댓글입니다

  • 강희웅 2017.11.02 08:16 ADDR EDIT/DEL REPLY

    잘보고간다ㅋㅋㅋㅋ

  • Favicon of https://hoyatag.com BlogIcon 호야네 2019.02.12 17:06 ADDR EDIT/DEL REPLY

    max이상으로 입력은 되어버리네요 ㅜㅜ input 박스 우측 스핀 컨트롤 입력만 제한되는것 같습니다. 크롬에서 테스트하였습니다.

    • Favicon of https://cofs.tistory.com BlogIcon 개발자 CofS 2019.02.12 17:41 신고 EDIT/DEL

      안녕하세요 ^^

      max 이상으로 입력은 됩니다.

      하지만 max 이상으로 입력한 후 submit 할 경우 submit 이 되지 않습니다.

      또한 모바일에서는 정상동작됩니다.

      해당 속성은 maxlength와 같이 키보드 입력제한이라고 보기에는 무리가 있어 보입니다. ^^

      참고하시기 바랍니다.
      https://www.w3schools.com/html/tryit.asp?filename=tryhtml_input_number