2016. 8. 11. 13:53ㆍlanguage/html
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 |
|
이메일주소, 혹은 그것의 목록 | 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)
'language > html' 카테고리의 다른 글
HTML5 javascript 에서 Image 썸네일 만들기 (0) | 2016.04.15 |
---|---|
[HTML 기초 강좌] 11. CSS ( 스타일시트 ) 적용하기 (2) | 2016.01.18 |
[HTML 기초 강좌] 10. img map 태그 (0) | 2016.01.18 |
[HTML 기초 강좌] 9. Table 태그 (0) | 2016.01.18 |
[HTML 기초 강좌] 8. iframe과 target (8) | 2016.01.18 |
[HTML 기초 강좌] 7. 링크연결 (2) | 2016.01.18 |
[HTML 기초 강좌] 6. img 태그 (8) | 2016.01.18 |
[HTML 기초 강좌] 5. 목록을 나타내는 ul 태그, ol 태그, dl 태그, li 태그 (10) | 2016.01.18 |
[HTML 기초 강좌] 4. hr 태그 ( 구분선, 수평선 ) (8) | 2016.01.18 |
[HTML 기초 강좌] 3.문자 형태 태그와 문장 형식 태그 (0) | 2016.01.18 |