[JavaScript] input type="number" 숫자만 입력되도록 설정하기

input의 type 속성을 number로 지정하여 한글 입력을 막았지만, +, -, . 의 기호가 입력되어 당황스러웠다면 드루와~

 

물론, 내 이야기다!

 

숫자 외 기호 등의 입력을 방지하는 방법은 정규 표현식을 활용할 수도 있지만, 내 경우에는 정규 표현식으로 잘 방어가 되지 않았기 때문에 다른 방법을 소개하려고 한다.

 

키보드 이벤트로 해당 기호 입력을 방지하는 방법인데, 바로 코드를 보자! (참고로 React 사용중..)

 

const AgeInput = () => {
	const handleKeyDown = useCallback((event) => {
    	if (event.key === '-' || event.key === '+' || event.key === '.') event.preventDefault()
    }, [])
    
    return (
    	<input type="number" onKeyDown={handleKeyDown} />
    )
}

 

키보드 이벤트를 콘솔창에 찍어보면 keyCode도 있는데 나는 그냥 key값을 이용했다.

키보드 이벤트의 key 값이 -, +, . 일 경우, event.preventDefault()를 해주는데 이는 이벤트의 기본 동작을 실행하지 않게 해주기 때문에 해당 기호를 입력하지 못하도록 할 수 있다.

 

정규표현식으로 원하는대로 잘 작동하지 않는다면 이 방법을 해보길 추천!

 

 

 

Event.preventDefault() - Web API | MDN