[JS] 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.  PATTERN

<input pattern="정규 표현식">

 

자주 사용되는 정규표현식

 

1. 영문자 소문자, 숫자, "-", "_" 로만 구성된 길이 2 ~ 10자리 사이 문자열

/^[a-z0-9_-]{2,10}$/ 

 

2. 신용카드 번호

19자리 숫자와 "-": /^[0-9-]{19}$/

4-4-4-4 체크: /^[0-9]{4}[-\s\.]?[0-9]{4}[-\s\.]?[0-9]{4}[-\s\.]?[0-9]{4}$/

 

3. 영문자 대소문자와 숫자로만 구성

/[a-zA-Z0-9]/

 

4. 전화번호

3자리-3~4자리-4자리(사이에 1자 아무거나 가능)): /^[(]?[0-9]{3}[)]?[-\s\.]?[0-9]{3,4}[-\s\.]?[0-9]{4}$/

3자리-3~4자리-4자리(사이에 "-" 고정): /^\d{3}-\d{3,4}-\d{4}$/

휴대폰&전화번호: /(^02.{0}|^01.{1}|[0-9]{3})([0-9]+)([0-9]{4})/

휴대폰번호: /^01(?:0|1|[6-9])[.-]?(\\d{3}|\\d{4})[.-]?(\\d{4})$/

 

5. UUID

/^[0-9a-fA-F]{8}\b-[0-9a-fA-F]{4}\b-[0-9a-fA-F]{4}\b-[0-9a-fA-F]{4}\b-[0-9a-fA-F]{12}$/

 

6. 아스키II 코드만

/[ -~]/

 

7. 맥어드레스

/^[a-fA-F0-9]{2}(:[a-fA-F0-9]{2}){5}$/

 

8. IP주소(IPv4)

/(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)(\.(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)){3}/

 

9. IP주소(IPv6)

/(([0-9a-fA-F]{1,4}:){7,7}[0-9a-fA-F]{1,4}|([0-9a-fA-F]{1,4}:){1,7}:|([0-9a-fA-F]{1,4}:){1,6}:[0-9a-fA-F]{1,4}|([0-9a-fA-F]{1,4}:){1,5}(:[0-9a-fA-F]{1,4}){1,2}|([0-9a-fA-F]{1,4}:){1,4}(:[0-9a-fA-F]{1,4}){1,3}|([0-9a-fA-F]{1,4}:){1,3}(:[0-9a-fA-F]{1,4}){1,4}|([0-9a-fA-F]{1,4}:){1,2}(:[0-9a-fA-F]{1,4}){1,5}|[0-9a-fA-F]{1,4}:((:[0-9a-fA-F]{1,4}){1,6})|:((:[0-9a-fA-F]{1,4}){1,7}|:)|fe80:(:[0-9a-fA-F]{0,4}){0,4}%[0-9a-zA-Z]{1,}|::(ffff(:0{1,4}){0,1}:){0,1}((25[0-5]|(2[0-4]|1{0,1}[0-9]){0,1}[0-9])\.){3,3}(25[0-5]|(2[0-4]|1{0,1}[0-9]){0,1}[0-9])|([0-9a-fA-F]{1,4}:){1,4}:((25[0-5]|(2[0-4]|1{0,1}[0-9]){0,1}[0-9])\.){3,3}(25[0-5]|(2[0-4]|1{0,1}[0-9]){0,1}[0-9]))/

 

 

10. 이메일주소

기본체크: /^([a-z0-9_\.-]+)@([\da-z\.-]+)\.([a-z\.]{2,6})$/

RFC5322: /\b[\w.!#$%&’*+\/=?^`{|}~-]+@[\w-]+(?:\.[\w-]+)*\b/

 

전자우편 주소: /^[a-z0-9_+.-]+@([a-z0-9-]+\.)+[a-z0-9]{2,4}$/ 

 

정밀체크 : /(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))/

 

 

11. 패스워드

최소 8자 이상으로 영문자 대문자, 영문자 소문자, 숫자, 특수문자가 각각 최소 1개 이상 : /^(?=.*?[A-Z])(?=.*?[a-z])(?=.*?[0-9])(?=.*?[#?!@$ %^&*-]).{8,}$/

최소 8자 이상으로 숫자, 특수문자가 각각 최소 1개이상: /^(?=.*?[0-9])(?=.*?[#?!@$ %^&*-]).{8,}$/

 

12. URL

프로토콜 포함: /https?:\/\/(www\.)?[-a-zA-Z0-9@:%._\+~#=]{2,256}\.[a-z]{2,6}\b([-a-zA-Z0-9@:%_\+.~#()?&//=]*)/ 

프로토콜 옵션: /(https?:\/\/)?(www\.)?[-a-zA-Z0-9@:%._\+~#=]{2,256}\.[a-z]{2,6}\b([-a-zA-Z0-9@:%_\+.~#?&//=]*)/ 

URL: 

-/^(file|gopher|news|nntp|telnet|https?|ftps?|sftp):\/\/([a-z0-9-]+\.)+[a-z0-9]{2,4}.*$/

13. HTML 태그

/^<([a-z]+)([^<]+)*(?:>(.*)<\/\1>|\s+\/>)$/

/<\/?[\w\s]*>|<.+[\W]>/

/<([a-z]+)([^<]+)*(?:>(.*)<\/\1>|\s+\/>)/

 

14. 하이퍼링크

/(?!<a\sname=\"([\w\s\d\-\.\#]+)\"><\/a>)<a\sname=\"([\w\s\d\-\.\#]+)\">(.*?)<\/a>/

 

15. 숫자만인지 체크

^(\(?\+?[0-9]*\)?)?[0-9_\- \(\)]*$

 

 

16. 웹사이트 하이퍼링크인지 체크

<a\s+(?:[^>]*)href=\"((?:https:\/\/|http:\/\/)(?:.*?))">(?:.*?)<\/a>

 

 

17 숫자와 영문자 대소문자만

공백없는 숫자와 영문자 대소문자: /^[a-zA-Z0-9]*$/

공백포함 숫자와 영문자 대소문자: /^[a-zA-Z0-9 ]*$/

영문자 대소문자: /[a-zA-Z]/

 

 

18. 년월일

yyyy-mm-dd: /^(19|20)\d\d([- /.])(0[1-9]|1[012])\2(0[1-9]|[12][0-9]|3[01])$/

 

 

19. 특수문자와 공백 선택

한글포함 특수문자와 공백: /[^?a-zA-Z0-9/]/

한글제외 특수문자와 공백: /[^-가-?a-zA-Z0-9/ ]/

 

 

20. 주민등록번호

/^[-A-Za-z0-9_]+[-A-Za-z0-9_.]*[@]{1}[-A-Za-z0-9_]+[-A-Za-z0-9_.]*[.]{1}[A-Za-z]{1,5}$/

주민번호, -까지 포함된 문자열로 검색 : /^(?:[0-9]{2}(?:0[1-9]|1[0-2])(?:0[1-9]|[1,2][0-9]|3[0,1]))-[1-4][0-9]{6}$/

 

추가

HTML 태그 - HTML tags: /

\<(/?[^\>]+)\>/ 

 

전화 번호 - 예, 123-123-2344 혹은 123-1234-1234: 

/(\d{3}).*(\d{3}).*(\d{4})/ 

 

날짜 - 예, 3/28/2007 혹은 3/28/07: 

/^\d{1,2}\/\d{1,2}\/\d{2,4}$/ 

 

jpg, gif 또는 png 확장자를 가진 그림 파일명: 

/([^\s]+(?=\.(jpg|gif|png))\.\2)/ 

 

1부터 50 사이의 번호 - 1과 50 포함: 

/^[1-9]{1}$|^[1-4]{1}[0-9]{1}$|^50$/ 

 

16 진수로 된 색깔 번호: 

/#?([A-Fa-f0-9]){3}(([A-Fa-f0-9]){3})?/ 

적어도 소문자 하나, 대문자 하나, 숫자 하나가 포함되어 있는 문자열(8글자 이상 15글자 이하) - 올바른 암호 형식을 확인할 때 사용될 수 있음: 

/(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{8,15}/

숫자만 가능 : [ 0 ~ 9 ] 주의 : 띄어쓰기 불가능

/^[0-9]+$/  

 이메일 형식만 가능
/^([\w-]+(?:\.[\w-]+)*)@((?:[\w-]+\.)*\w[\w-]{0,66})\.([a-z]{2,6}(?:\.[a-z]{2})?)$/

한글만 가능 : [ 가나다라 ... ] 주의 : ㄱㄴㄷ... 형식으로는 입력 불가능 , 띄어쓰기 불가능

/^[가-힣]+$/  

한글,띄어쓰기만 가능 : [ 가나다라 ... ] 주의 : ㄱㄴㄷ... 형식으로는 입력 불가능 , 띄어쓰기 가능

/^[가-힣\s]+$/  

영문만 가능 :

/^[a-zA-Z]+$/  

영문,띄어쓰기만 가능

/^[a-zA-Z\s]+$/  

전화번호 형태 : 전화번호 형태 000-0000-0000 만 받는다. ]

/^[0-9]{2,3}-[0-9]{3,4}-[0-9]{4}$/  

도메인 형태, http:// https:// 포함안해도 되고 해도 되고

/^(((http(s?))\:\/\/)?)([0-9a-zA-Z\-]+\.)+[a-zA-Z]{2,6}(\:[0-9]+)?(\/\S*)?$/

도메인 형태, http:// https:// 꼭 포함

/^((http(s?))\:\/\/)([0-9a-zA-Z\-]+\.)+[a-zA-Z]{2,6}(\:[0-9]+)?(\/\S*)?$/
 
도메인 형태, http:// https:// 포함하면 안됨

/^[^((http(s?))\:\/\/)]([0-9a-zA-Z\-]+\.)+[a-zA-Z]{2,6}(\:[0-9]+)?(\/\S*)?$/

한글과 영문만 가능

/^[가-힣a-zA-Z]+$/;

 

숫자,알파벳만 가능

/^[a-zA-Z0-9]+$/;

 

---

4. 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" />

 

 

 

참조

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

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

https://zzokma.tistory.com/1644