Input 숫자만 입력 정규식 - input susjaman iblyeog jeong-gyusig

input영역에 숫자만 입력 받는 방법은

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

이렇게 input type을 number로 지정해 주면 되는 일이지만 

input에 up down 버튼이 생겨버린다.

그래서 input type="text"로 하면서 숫자만 입력 받기 위해서는 oninput 이벤트와 정규식을 사용해서 가능하다.

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

oninput 이벤트는 input 값이 바뀌면 발생하는 이벤트 이며 이 이벤트가 발생할 때 숫자만 입력받는 정규식이 적용되고 숫자가 아닌 값이 입력되면 replace 함수로 대체하게 된다.

참고사이트 

https://stackoverflow.com/questions/469357/html-text-input-allow-only-numeric-input/28838789#28838789

https://stackoverflow.com/questions/469357/html-text-input-allow-only-numeric-input/469362#469362

어제 오늘 내일

IT/Javascript

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

hi.anna 2020. 8. 12. 00:52

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에 숫자만 입력받는 여러가지 방법을 알아보았습니다.

[Javascript 자바스크립트]

텍스트 인풋 박스에 숫자, 혹은 특수문자만 입력 가능하게 제어하기

오늘의 글은 텍스트 인풋 박스에 숫자 혹은 숫자와 특수문자만 입력 가능하게 제어하기 입니다.

더 세세하게 제어할 수 있는 방법들도 있겠지만, 간단히 제어할 때 사용하는 방법입니다. 

주로 전화번호 등을 입력받을 때 숫자 외의 문자가 들어가지 않도록 제어하기 위해 사용합니다.

방법은 크게 (1) event를 사용한 방법, (2)정규식을 사용한 방법으로 나뉘며 

궁극적으로 저는 두 가지 방법을 함께 사용했습니다. 그 이유는 아래에 나와있습니다.

1. event를 사용한 방법

1-1 . key를 사용한 방법

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


<input type="text" onkeydown="return checkNumber(event);"/>

이 방법은 key의 값을 0~9로 제한시키는 것입니다.

대신 key의 값이기 때문에 백스페이스바, 방향키 이동 등을 제어할 수 없습니다.

그래서 백스페이스바와 방향키를 제어하기 위해서는 아래의 방법을 사용합니다.

1-2. keyCode로 제어하는 방법(특수문자, 백스페이스바, 방향키 등 포함)

function onlyNumber(){
   if((event.keyCode > 48 && event.keyCode < 57 ) 
      || event.keyCode == 8 //backspace
      || event.keyCode == 37 || event.keyCode == 39 //방향키 →, ←
      || event.keyCode == 46 \\delete키
      || event.keyCode == 39){
   }else{
   event.returnValue=false;
   }
}


<input type="text" onkeydown="return onlyNumber();"/>

키 코드를 사용하면 값이 입력되는 동작이 아니더라도 각각의 키코드가 있기 때문에

백스페이스바, 방향키 등을 제어할 수 있습니다.

이 방법이 더 일반적으로 쓰기 좋은 방법이라 생각합니다.

그리고, event는 자바스크립트 함수에서 변수로 값을 굳이 넘겨주지 않아도 바로 호출해서 사용할 수 있다고 합니다.

1-1에서는 onlyNumber(event) 이렇게 이벤트를 넘겨주었지만,

1-2에서는 onlyNumber() 파라미터 없이 호출한 것 처럼요.

▶유의할 점

키코드를 사용하여 제어를 해보니,

이상하게도 영어와 특수문자는 입력이 안되지만 한글은 그대로 입력되어버리는 문제가 생기더라구요..

event.returnValue=false; 까지 가는 데도 한글은 그대로 입력이 되어버렸습니다.

그래서 저는 결국 아래의 2번 방법과 함께 사용하게 되었습니다. 

(혹시 해결 방법을 아시는 분은 알려주세요... ㅜㅜ) 

2. 정규식을 사용하는 방법

2-1. 정규식을 사용하여 숫자만 입력가능하게 하기 : 0123456789

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

2-1. 정규식을 사용하여 '-' 등 특수문자까지 입력가능하게 하기 : -0123456789

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

^ 뒤에 해당 특수문자를 붙여주면 됩니다.

▶유의할 점

이렇게 onKeyup으로 정규식을 적용하여 만들 경우,

아래 이미지처럼 숫자 이외의 문자를 입력하면 잠깐 입력이 되었다가 바로 지워집니다.

위의 1-1, 1-2가 입력 조차 되지 않는 것과는 다릅니다.

onKeyup으로 입력이 된 후 그 값을 체크하여 숫자 이외의 값을 ''으로 replace하는 개념이기 때문입니다.

▶정규식 설명

여기서 사용하는 replace(/[^0-9]/g, '') 부분의 정규식에 대해 잠깐 설명을 덧붙이자면,

[^0-9] 에서 ^는 Not, 즉 부정의 의미로 '0-9가 아닌' 을 의미합니다.

그래서 입력받은 문자열에서 숫자가 아닌 것들을 모두 선택하게 됩니다.

 /g는 플래그라고 하며, g는 Global을 의미하여 전체에서 해당되는 모든 문자열을 담은 배열을 반환하라는 의미입니다. 

입력받은 문자열 중 0-9가 아닌 모든 것들을 선택하여, ''로 Replace해라 - 라는 구문이 되는 것입니다.

위에서도 말했듯이,

1번 event keyCode를 사용할 경우 한글문자열은 그대로 입력이 되어버리는 문제가 있어,

저는 2번과 함께 사용하거나 2번만 사용하여 제어했습니다.

다음 번에 정규식도 한번 자세히 공부해서 올리도록 하겠습니다.

오늘 글은 여기서 마치겠습니다. 도움이 되셨길 바래요!