input 태그 maxLength 속성 사용시 생기는 버그

문제

유저에게 텍스트를 입력받아 정답인지 오답인지 검증하는 작업을 진행중이였습니다

해당 input은 정답 데이터의 글자 수 만큼 입력되도록 maxLength를 설정해두었는데요

그런데 위 예시처럼 정답의 길이가 두글자인 경우에 2글자를 초과한 한글자가 더 입력되는 현상이 생겼습니다

영어로 입력하는 경우에는 해당 버그가 발생하지 않았고 한글일 경우에만 발생했습니다

원인

알아본 결과 한글과 영어의 byte 차이 때문에 일어나는 현상이였습니다

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

해결

유저가 정답을 입력하면서 onChange 이벤트가 일어날때마다 유저가 입력한 정답과

우리가 설정해 둔 정답의 길이를 비교해서 정답의 길이보다 클 경우에

slice 메서드를 이용해서 추가 입력된 글자를 제거해주었습니다.

그 결과 원하는 동작이 구현되었습니다.