웹 폼을 만들 때, 특정 입력 필드에 숫자만 입력되도록 제한하는 것은 흔히 필요합니다. 예를 들어, 전화번호, 나이, 금액 등을 입력받을 때 유용합니다.
이번 포스팅에서는 JavaScript를 사용해 input 박스에 숫자만 입력되도록 설정하는 다양한 방법을 알아보겠습니다.
HTML의 input 요소와 type 속성 사용
가장 간단한 방법은 HTML의 input 요소에 type="number" 속성을 사용하는 것입니다. 이는 기본적으로 숫자만 입력할 수 있도록 제한해 줍니다.
See the Pen input 숫자만 입력 by saladent (@saladent) on CodePen.
이 방법은 사용자가 숫자가 아닌 값을 입력하려 할 때 브라우저에서 기본적인 유효성 검사를 제공합니다. 하지만, 이 방법은 숫자 외에 일부 부호(+, -, .)도 허용할 수 있습니다.
keydown 이벤트 사용
keydown 이벤트를 사용하여 숫자 이외의 문자가 입력되지 않도록 할 수 있습니다. 이 스크립트는 사용자가 입력 필드에 값을 입력할 때마다 실시간으로 숫자가 아닌 문자를 제거합니다.
See the Pen input 숫자만 입력-2 by saladent (@saladent) on CodePen.
oninput 이벤트 사용
oninput 이벤트를 사용하여 숫자 이외의 문자가 입력되지 않도록 할 수 있습니다. 이 방법은 oninput 이벤트가 발생할 때마다 정규식을 사용하여 실시간으로 숫자가 아닌 문자를 제거합니다.
See the Pen input 숫자만 입력-3 by saladent (@saladent) on CodePen.