TIL-71 JavaScript input max length

PRB·2022년 7월 29일
0

JavaScript

목록 보기
24/24
post-thumbnail

프로젝트를 하던 중 input을 컴포넌트를 제작하고 있었고 글자 수를 제한하기 위해 maxlength의 값을 props로 받았는데 type이 text 면 적용이 되는데 number 면 안된다고 하더라...
찾아보니까 이런 경우 말고 한글은 maxlength를 초과해서 한자리까지 더 쳐지는데 이유는
한글과 영어의 byte 차이 때문에 일어나는 현상이라고 한다.

한글은 2byte 영어는 1byte 로 표현하기 때문에

그래서

const handleMaxLength = (e) => {
    if (e.target.value.length < maxLength + 1) {
      onChange(e)
    } else {
      return
    }
  }

라는 함수를 만들어서 해결했다.

profile
사용자 입장에서 사용자가 원하는 것을 개발하는 프론트엔드 개발자입니다.

0개의 댓글