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

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

 

 

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

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

 

 

 

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

 기본 예제 

 

 

 

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

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

 

 min, max, step 속성 지정하기 

 

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

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

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

 

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

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

 

 

 

2. 입력된 key 체크하기

 

 

 HTML 

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

input type은 'text'이고,

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

 

 JS 

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

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

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

 

이 방법의 단점은, 

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

 

 

 

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

 

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

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

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

 

 

 

4. pattern 속성 활용하기

 

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

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

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

 

또한, 

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

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

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

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

 

출처: https://hianna.tistory.com/413 [어제 오늘 내일]