HTML input의 type이 number일 때, 일부 브라우저에서 한글 입력 시 첫 글자가 입력되는 현상은 브라우저가 한글의 입력 방식을 처리하는 과정에서 발생하는 문제이다.
이 현상을 이해하려면 한글의 입력 방식과 브라우저의 처리 방식 차이를 살펴봐야 한다.
한글 입력 방식
한글은 다른 언어와 다르게 자음과 모음이 조합되어 완성된 한 글자가 만들어진다. 예를 들어, 'ㅎ'과 'ㅏ'를 입력하면 '하'가 되는 식이다. 이 과정에서 사용자가 키보드로 자음과 모음을 입력할 때마다 입력 중인 문자를 브라우저에 보낸다.
브라우저의 숫자 입력 처리
input 타입이 number일 때, 브라우저는 기본적으로 숫자 외의 입력을 막도록 설계되어 있다. 하지만 한글 입력의 특수성 때문에 자음 또는 모음 하나만 먼저 전송하는 경우가 생겨서 한글의 첫 자음 또는 모음이 입력창에 들어가게 된다. 브라우저는 이 상황을 제대로 처리하지 못하고, 첫 글자를 일시적으로 보여준 다음에서야 숫자가 아닌 입력임을 인지하고 차단하게 된다.
해결 방법
여러 방법이 있을 수 있겠으나, 이 글에서는input에서 숫자가 아닌 문자가 입력되는 것을 실시간으로 감지하는 oninput 이벤트를 사용한다.
예제
리액트에서는 onInput 이벤트를 사용한다.
const preventInvalidInput = (event: ChangeEvent<HTMLInputElement>) => {
// 숫자가 아닌 입력값과 한글 입력을 필터링한다.
event.target.value = event.target.value.replace(/[^0-9]/g, '');
};
<input
type='number'
onInput={preventInvalidInput}
/>onInput과 onChange의 차이
-
onInput: 값이 변경될 때마다 호출된다.
즉, 사용자가 키를 누를 때마다 실시간으로 이벤트가 발생하므로 실시간 검증이나 필터링 작업에 적합하다.
키 입력마다 호출되기 때문에 복잡한 처리가 들어가면 성능에 영향을 줄 수 있다. -
onChange: 입력을 마치고 포커스를 잃거나Enter를 눌러야만 호출된다.
입력이 완료된 후의 처리가 필요한 경우에 적합하다.
