[Javascript] input 박스에 숫자만 입력되도록 설정하는 4가지 방법

 

 

input 박스에서 사용자에게 숫자만 입력되도록 설정하는 방법 4가지를 소개합니다.

 

 

input 박스에 숫자만 입력되도록 설정하는 4가지 방법

1. 'type'을 'number'로 지정하기
2. 입력된 keycode 체크하기
3. oninput 이벤트, 정규식, replace() 함수 활용하기
4. pattern 속성 활용하기

 

 

 

1. 'type'을 'number'로 지정하기

 기본 예제 

<input type='number'></input>

 

 

input의 type속성을 'number'로 지정하면, 숫자만 입력 받을 수 있습니다.

브라우저에 따라서, 입력창 오른쪽에 숫자 증감 아이콘도 생성됩니다.

 

 min, max, step 속성 지정하기 

<form>
  <input type='number' min='10' max='30' step='5'>
  <input type='submit'>
</form>

input의 type을 'number'로 지정한 경우,

min, max 속성을 추가하여 최대값과 최소값을 지정할 수 있습니다.

step 속성은, 입력받을 숫자들의 간격입니다.

 

위, 예제는 10, 15, 20, 25, 30 만 입력받을 수 있습니다.

이 이외의 숫자들이 입력 된 경우, 제출(submit) 버튼을 클릭하면, 오류 메세지를 보여줍니다.

 

 

 

2. 입력된 key 체크하기

<input type='text' onkeypress='return checkNumber(event)'>

function checkNumber(event) {
  if(event.key >= 0 && event.key <= 9) {
    return true;
  }
  
  return false;
}

 

 HTML 

<input type='text' onkeypress='return checkNumber(event)'>

input type은 'text'이고,

onkeypress 이벤트가 발생하면 checkNumber 함수를 호출하여 결과를 리턴하도록 하였습니다.

 

 JS 

checkNumber() 함수는 keyboard event를 입력받아,

입력된 값이 숫자 인 경우 true를 리턴하여 input에 입력되게 하고,

그렇지 않은 경우에는 false를 리턴하여 input에 입력되지 못하도록 하였습니다.

 

이 방법의 단점은, 

마우스로 숫자가 아닌 값을 붙여넣기 하면, 입력이 된다는 점입니다.

 

 

 

3. oninput 이벤트, 정규식, replace() 함수 활용하기

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

'oninput' 이벤트는 input form의 값이 바뀌면 발생합니다.

oninput 이벤트가 발생했을 때, 숫자만 입력할 수 있는 정규식을 적용하여,

숫자가 아닌 다른 값이 입력되면 replace() 함수를 이용하여 값을 대체하도록 하였습니다.

 

 

 

4. pattern 속성 활용하기

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

input:invalid {
  border: 3px solid red;
}

input에 pattern 속성을 지정하고, 입력한 값을 검증할 정규식을 입력하였습니다.

위 pattern 속성에 지정된 정규식은 숫자만 입력받도록 하고 있습니다.

만약, 숫자가 아닌 다른 문자가 입력된다면, '제출(submit)' 버튼 클릭시 메시지를 표시합니다.

 

또한, 

css에 input:invalid 속성을 지정하면

input에 입력된 값이 pattern에 맞지 않으면(즉, 숫자가 아닌 다른 값이 입력되면)

즉시, input:invalid에 적용된 CSS를 적용하여

input 필드의 색을 변경해 줍니다.

 

---

 

input form에 대한 다른 포스팅

[HTML]<form>태그로 사용자 입력 받기

[HTML] <input type="text" /> 태그로 패스워드(비밀번호) 입력란 만들기`

[HTML] 입력받은 데이터 서버로 전송하기 - submit

[HTML] <input type="text" /> 태그로 버튼(button) 생성하기

[HTML] <input type="text" /> 태그로 체크박스(checkbox) 만들기

[HTML] <input type="text" /> 태그로 라디오버튼(radio) 만들기

[HTML] 입력 데이터 초기화를 위한 리셋 버튼(reset) 만들기

[HTML] 날짜, 시간, 년도 입력받기

[HTML] 날짜, 시간 입력 항목 기본값으로 세팅하기

[HTML] 날짜 입력 항목에 현재 시간을 기본값으로 세팅하기

[HTML] 사용자로부터 색깔 입력받기

[HTML] input type='file' 속성 알아보기 ( 파일 입력 )

[Javascript] 로컬 텍스트 파일 읽기 (다중 파일 선택)

[Javascript] 디렉토리 선택하여 파일 리스트 가져오기 (이름, 상대경로)

[Javascript] input 입력값 가져와서 출력하기

 

---

input form에 숫자만 입력받는 여러가지 방법을 알아보았습니다.