html5 | input type number maxlength 설정 ( 모바일 ) / oninput, max, min 출처: http://cofs.tistory.com/215 [CofS]

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

 

input 에는 maxlength 속성이 있다.

 

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

 

 

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

 

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

 

 

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

 

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

위 코드 실행 시 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

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

javascript

function maxLengthCheck(object){
    if (object.value.length > object.maxLength){
        object.value = object.value.slice(0, object.maxLength);
    }    
}

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

 

 

 

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

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

[이미지2]

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

 

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

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

 

 

 

 

 

* 참고 : 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)

출처: http://cofs.tistory.com/215 [CofS]