[Book Buddy / Function] 전화번호 숫자 길이 제한하기

문제상황: 핸드폰 번호를 입력받는 input을 4자리로 제한하고 싶은데 max, maxLength 모두 의도대로 작동하지 않는다.

 

 

알아보니 

 

maxLength는

type이 number일 때 적용할 수 없고,

 

max는

1. 지정한 숫자를 입력받지만 화면에서는 지정한 숫자를 넘은 숫자까지 입력할 수 있고,

2. 지정한 숫자를 넘을 경우 실제 입력받는 값은 지정한 최대값으로 고정된다.

 

 

가장 일반적인 방법은 type을 text로 지정한 후 pattern 정규식을 활용해 숫자만 입력받게끔 하고, maxlength를 지정하는 것이라고 한다.

 

 

 

---

참고자료

https://webisfree.com/2022-04-28/[html]-input-%ED%83%9C%EA%B7%B8-number-%ED%83%80%EC%9E%85%EC%9D%98-maxlength-%EC%B5%9C%EB%8C%80-%EC%9E%90%EB%A6%BF%EC%88%98-%EC%84%A4%EC%A0%95%ED%95%98%EA%B8%B0