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