Javascript - input 숫자만 입력받도록 설정

<input/>에 사용자가 숫자만 입력할 수 있도록 설정하는 방법에 대해서 알아보겠습니다.

1. type=number 를 이용한 방법

input에 type=number로 타입을 지정하면 숫자만 입력할 수 있습니다.

• 숫자 이외의 문자 입력 시, 입력 안됨

<input type="number"/>

Output:

max, min, step 설정

max는 입력 가능한 숫자의 최대 값, min은 최소 값, step은 입력받을 숫자들의 간격입니다.

• 아래 예제는 0, 5, 10, ..., 100 의 숫자들을 받습니다.
• submit 버튼 클릭 시, 잘못된 숫자가 입력되어있으면 에러 메시지가 보입니다.

<form>
  <input type="number" min="0" max="100" step="5"/>
  <input type="submit"/>
</form>

Output:

2. 정규표현식을 이용한 방법 (type=text)

type이 text인 경우 숫자와 문자를 모두 입력할 수 있습니다.

만약 input에 pattern="[0-9]*을 추가하면, 입력 값이 패턴과 일치하는, 0에서 9 사이의 숫자만 허용됩니다.

• 아래 예제는 0~9의 숫자만 허용됩니다.
• submit 버튼 클릭 시, 잘못된 패턴(숫자)의 값이 입력되어있으면 에러 메시지가 보입니다.

<form>
  <input type="text" pattern="[0-9]*"/>
  <input type="submit"/>
</form>

Output:

3. oninput과 replace를 이용한 방법 (type=text)

type이 text인 경우, oninput과 replace를 이용하여 숫자만 입력되도록 할 수 있습니다.

input의 입력 값이 변경되면 oninput의 함수가 호출되는데, 아래와 같이 값이 입력될 때마다 replace를 이용하여 숫자를 제외한 다른 문제를 모두 제거할 수 있습니다.

<input type="text" oninput="this.value=this.value.replace(/[^-0-9]/g,'');"/>

Output: