텍스트 박스에 숫자만 입력 받고 싶을 때

출저 http://dooji.tistory.com/144

 

텍스트 박스에 숫자만 입력 받고 싶을 때,
보통 event.KeyCode를 판별하여 숫자의 범위(48~57)만 허용하고
나머지는 무시하는 자바스크립트를 사용한다.
아래 예제는 일반적으로 사용되는 숫자 전용 텍스트 박스를 위한 코드이다.

function onlyNumber(){
   if((event.keyCode<48)||(event.keyCode>57))
      event.returnValue=false;
}
<input type="text" name="cnt"  onkeypress="onlyNumber();">

하지만, 한/영키를 이용하여 한글을 입력하면, 한글은 입력이 된다.
실질적으로는 229라는 키 값을 발생시키지만, 다른 기능키로 판단하고 무시한다.
이를 막기 위해 Style 속성에 ime-mode를 사용하여 제어 할 수 있다.
이 속성은 아래와 같은 값과 의미를 갖는다.
ime-mode :auto ==> (자동변경) 한/영 전환가능
ime-mode :active ==> (기본 한글모드) 한/영 전환가능
ime-mode :inactive ==> (기본 영문모드) 한/영 전환가능
ime-mode :disabled ==> (기본 영문모드) 한/영 전환불가능 (영문/숫자만 입력가능)
ime-mode :deactivated ==> (자동변경) 한/영 전환가능
오직 숫자만 허용하는 경우 style 속성을 ime-mode : disabled 선택
위에서 예제로 보여준 숫자만 입력받는 자바스크립트 추가
onkeypress="onlyNumber();"
function onlyNumber(){
   if((event.keyCode<48)||(event.keyCode>57))
      event.returnValue=false;
}

<input type="text" name="cnt"  onkeypress="onlyNumber();" style="ime-mode:disabled">