[JS] input maxlength : 한글, 숫자 입력 시 오류 해결 & e.target 구조분해

 

 

💡 input 에 한글이나 숫자를 입력할 때 maxlength 가 부자연스러운 동작을 하는데,
원하는 글자수로 딱 제한할 수 있도록 해결해보자!

 

 

<input
  type="text"
  value={nickName}
  onChange={(e) => setNickName(e.target.value)}
  placeholder="최대 20자"
  maxLength={20}
/>

 

maxLength 로 제한을 두니 한글을 입력했을 때나,

숫자 + 한글을 입력했을 때 21 자가 입력이 되버린다.

 

⬇️

const handleOnInput = (e, maxlength) => {
  const { target: { value }, } = e;
  if (value.length > maxlength) e.target.value = value.substr(0, maxlength);
};
  
// ...

<input
  type="text"
  value={nickName}
  onInput={(e) => handleOnInput(e, 20)}
  onChange={(e) => setNickName(e.target.value)}
  placeholder="최대 20자"
/>

 

이렇게 input 값의 길이가 설정한 maxlength 보다 길면

0 ~ maxlength 까지 잘라주는 함수로 오류를 해결할 수 있다!

 

 

숫자와 한글을 조합했을 때 원했던 20자까지 잘 입력된다.

 

 

 

🔗 https://hianna.tistory.com/435

[Javascript] input 에서 입력 글자수 제한하는 2가지 방법

🔗 https://velog.io/@seoyul0203/REACT%EA%B5%AC%EC%A1%B0%EB%B6%84%ED%95%B4-%ED%95%A0%EB%8B%B9-%EC%98%88%EC%8B%9C

[REACT]구조분해 할당 예시

🔗 https://whales.tistory.com/97

ES6 : 구조할당(feat.이벤트 값 핸들링)