[Javascript] Input박스에 숫자만 입력 가능하게 제어하기

[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번만 사용하여 제어했습니다.

 

 

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

 

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