[html] input(inputmode, event, pattern)

1. 이벤트순서

 

단순 input text에 word입력 시 이벤트 순서

 

focus > click  > keydown > input > keyup > change > blur

 

 

---

2. inputmode

 

none

가상 키보드를 사용하지 않아요. 키보드를 직접 구현할 때에 사용합니다.

<input inputmode="none" />

 

text (default)

기본값으로 제공되고, type 속성에 따라 제공되는 가상 키보드가 표시된다.

<input inputmode="text" />

 

decimal

소수점(.)을 제공하는 숫자형 키보드를 보여줘요.

<input inputmode="decimal" />

 

ㅠnumeric

숫자형 키보드를 보여줘요. decimal 모드의 키보드와 약간 차이가 있어요.

<input inputmode="numeric" />

tel

전화번호를 입력하는 키보드가 나타나요. 저는 iPhone을 사용하는데요. 나의 전화번호를 입력하기 편하도록 자동완성도 나오네요.

<input inputmode="tel" />

 

search

검색에 적당한 키보드가 나타나요. 기본 형태의 키보드와 차이점을 발견하셨나요? return 버튼이 go 버튼으로 바뀌었어요.

<input inputmode="search" />

email

기본 키보드에서 @ . 키가 더 나타났어요. 이메일을 입력하기 더욱 편리하게 말이죠! 전화번호 키보드와 같이 나의 이메일을 입력하기 편하도록 자동완성도 나오네요.

<input inputmode="email" />

 

url

기본 키보드에서 . / .com 와 같은 키가 더 많이 나와요. 기본 키보드보다 url을 입력하기 편해졌어요.

<input inputmode="url" />

 

 

---

 

3. max, maxlength

 

문자열 최대 길이 설정입력폼에서 가장 많이 사용되는 input 태그

<input type="text" placeholder="최대 길이 6으로 설정" maxlength="6" />

 

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

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

그런데 문제는 여기서 발생합니다. 위에서 maxlength가 정상 동작할까요?

결론은 아닙니다. 그 이유는 숫자 타입의 경우 문자열에 사용하는 maxlength 어트리뷰트(속성)가 동작하지 않기 때문입니다.

실제로 입력해보면 제한없이 계속 입력됩니다.

 

해결방법 >

1. 정규표현식(regex)을 pattern 어트리뷰트에 maxlength와 함께 사용하기

<input type="text" pattern="\d*" maxlength="8" />

2. 자바스크립트에서 키 입력 이벤트로 제어하기

3. min, max 어트리뷰트를 사용하기

<input type="number" min="0" max="99999999" />

 

4. 그 외 유용한 타입

 

<input type="range" min="0" max="10"/> //범위선택
<input type="reset" value="reset" /> //폼초기화
<input type="color" value="" /> //색선택

 

 

---

 

https://pxd-fed-blog.web.app/inputmode/

http://www.tcpschool.com/html-tag-attrs/input-pattern

https://zzokma.tistory.com/1644