[jQuery] input에 숫자만 입력받기

,

[알림] jQuery 플러그인도 있더라. iMask라는 놈이다. (2011-08-19 추가)

정확히 아래 코드를 복사해서 사용하면 된다. 이건 뭐, 열라 헤매다가 이 코드를 만나니 허무해 진다.

단, 주의할 점이 있다. 한글은 입력이 된다 ㅡㅡ;; 그래서 내 경우 isNaN 함수로 최종 검사를 한 번 더 수행해 줬다.

<script src="http://code.jquery.com/jquery-latest.js" type="text/javascript"></script>
<script type="text/javascript">
$(function(){
$('.quantity').keypress(function(event){
  //alert(event.which);
  if (event.which && (event.which  > 47 && event.which  < 58 || event.which == 8)) {
    //alert('숫자임!');
  } else {
    //alert('숫자아님!');
    event.preventDefault();
  }
});
});
</script>
<div class="quantity">
  <input type="text"/>
</div>

일단 keyup 이벤트 핸들러를 사용하면 안 된다. 왜냐면, keyup이 호출될 시점이면 이미 숫자 아닌 다른 글자가 입력된 상태기 때문이다.

그니깐, key 관련 이벤트는 아래처럼 된다.

keypress 혹은 keydown → 키의 기능 실행(엔터면 엔터, 숫자입력이면 숫자입력 등) → keyup

(keypress, keydown, keyup 의 차이를 알고 싶은 사람들은 여기에 들어가 보면 된다.)

그러니 keyup으로 호출하면 이미 늦은 것이다. 그래서 keypress가 딱 들어오면 이놈이 숫자키냐 아니냐를 판단해야 한다.

숫자키는 48번부터 57번이다. 그 사이인 놈들이 눌렸으면 그냥 지나간다. 그리고 8번은 백스페이스다. 숫자를 지울 수는 있게 해야 한다.

keypress 이벤트의 경우 event.keyCode로 키값을 알아내는 게 아니라 event.charCode 혹은 event.which로 알아내야 한다. 이 코드에서는 event.which를 사용했다.

그리고 event.which는 글자 입력에만 적용되는 놈이라고 한다. 즉, 엔터나 탭은 자유롭게 사용할 수 있다.

또한 event.preventDefault() 도 재밌는 함수도. 이 함수는 함수 이름 그대로 ‘기본을 막는다’. 키가 눌렸을 때의 기본 기능은 키에 해당하는 글자를 입력하는 것이다. 그런데 숫자가 아닌 경우에는 preventDefault 함수가 호출됐다. 그러면 기본 기능이 막힌다. 즉, 키 입력이 안 되는 것이다.

링크를 click했을 때 이 놈을 호출하면 링크 이동을 막는다. 문자든 숫자든 입력하는 키를 눌렀을 때 이놈을 호출하면 입력을 막아버린다. 폼에서 엔터를 눌렀을 때 이놈을 호출하면 submit을 안 할 것이다. 여튼 그런 놈이다.

그럼 해설 끝!

카테고리 글 목록 👉

,

대표글

“[jQuery] input에 숫자만 입력받기”에 대한 7개의 응답

  1. 좋은 정보 감사합니다.

    1. 저도 많은 분들에게 도움을 받았죠. 좋은 정보라고 해 주시니 감사합니다.

  2. 파폭은 한글을 차단하지 못한다.

  3. FF 에서 안습이네요..
    ie 5,6,7,8,9
    결과
    5,8(되는 버전있꼬 안되는 버전있음)는 안되네요
    6,7,9 확실히 되는듯함
    크롬도 작동함

    $(‘#selector’).css(“ime-mode”, “disabled”); 추가 하면 한글도 완벽

    >> http://itgroup.com.ph/alphanumeric/

    1. 말씀하신 내용을 반영해서 글을 수정하는 게 좋겠군요.

  4. ㅋ…기본적인 테스트도 안해보시고…
    영어글자만 막고, 한글은 죄다~~~~입력되네….

    1. “단, 주의할 점이 있다. 한글은 입력이 된다.” 본문에 써있어요.

ㄹㄹ 에 응답 남기기응답 취소