input type number에서 한글입력 방지

폼에서 한 Input에서 데이터가 넘어오질 않아 확인해달라는 요청이 들어왔다.

 

확인을 해보니 문제는 type이 number인 input에서 한글이 입력되었을때 빈 값을 리턴하는것이였다.

 

먼저 정규표현식으로 입력값을 숫자만 남기고 제거하는 방법을 사용하려고 했는데, 아무리 해도 undefined값이 리턴되었다.

e.target.value를 확인한 결과 한글이 입력되는순간 빈값으로 변경되었고 정규표현식을 사용하려해도 사용할수 없는 상황이였다.

 

Type을 text로 설정해 정규표현식으로 숫자만 남기는식으로 하고 싶었지만 모바일에서 숫자 키패드가 나와야 하는 상황이라 text를 사용할수 없었고, 이벤트 객체 안에 사용할만한 다른놈이 있나 콘솔을 찍어봤다.

 

위에서부터.. event, event.target, event.target.value, event.nativeEvent, event.currentTarget.value

흔히 사용하는 target.value와 currentTarget은 누적 입력값이 출력되었고 nativeEvent에서는 최근 입력된 값 하나가 출력되는것을 확인!

const handleChange = (key: string, type: string) => (e: React.ChangeEventHandler<HTMLInputElement>) => {
    if (type === 'number') {
      const check = /[a-z|ㄱ-ㅎ|ㅏ-ㅣ|가-힣]/g;
      if (e.nativeEvent.data && check.test(e.nativeEvent.data)) {
        return null
      }
      onChange({ [key]: e.target.value });
    } else {
      onChange({ [key]: e.target.value });
    }
  };

nativeEvent를 정규표현식으로 검사해 숫자외의것이 입력되면 setState하지 않고 null을 리턴하게 했는데, 처음에 null을 리턴하지 않고 그냥 return만 했을때는 지우지도 못하는 현상이 있어 null을 리턴해주는것으로 해결했다.