Input -> type="number" 한글 자음 입력 방지

 

현재 react-hook-form을 사용해서 폼을 만들고 있는데 , 

 

분명 number 타입으로 만들었는데 

아래와 같이 한글 자음도 입력을 받는것임.

 

 

 

 

아래의 링크와도 동일한 현상이 발생함.

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/number

<input type="number"> - HTML: HyperText Markup Language | MDN

 

 

 

내가 해결한 방법은 type = number을 사용하지않고 

onchange 이벤트를 활용해서 

 

정규표현식을 사용해서 숫자 외 다른 문자들은 입력하지 못하게 막았다. 

    // 숫자 입력 방지
    const onValueChange = (
        e: React.ChangeEvent<HTMLInputElement>
    ): void => {
        const inputValue = e.target.value;
        const numericValue = inputValue.replace(/[^0-9]/g, ''); // 숫자 이외의 문자는 제거
        const numericValue2 = numericValue.replace(/[ㄱ-ㅎ|ㅏ-ㅣ|가-힣]/g, ''); // 한글 문자 제거

        methods.setValue('value', numericValue2);
    };

 

 

 

 

 

---

https://velog.io/@kykim0818/input%EC%9C%BC%EB%A1%9C-%EC%88%AB%EC%9E%90%EB%A7%8C-%EC%9E%85%EB%A0%A5-%EB%B0%9B%EA%B8%B0-%EC%9E%90%EA%BE%B8-%ED%95%9C%EA%B8%80-%EC%9E%90%EC%9D%8C-%EC%9E%85%EB%A0%A5%EC%9D%B4-%EB%90%98%EC%9A%94

input으로 숫자만 입력 받기 - 자꾸 한글 자음 입력이 되요...