javascript 에서 input 값에 숫자이외의 글 입력막기

원본 글 : http://mainia.tistory.com/257

javascript 에서 input 값에 숫자이외의 글을 넣었을때 더이상 입력이 되지 않도록 막는 소스이다.

여러형태가 있으니 소스를 보고 분석하다 보면 공부가 많이 될것이다.

// 키 이벤트 값으로 판단

function checkForNumber() {

  var key = event.keyCode;

  if(!(key==8||key==9||key==13||key==46||key==144||

      (key>=48&&key<=57)||key==110||key==190)) {

      event.returnValue = false;

  }

}

// 숫자만 입력과  특수문자('-','.',...)도 허용한다.

function onlyNumber() {

   if((event.keyCode > 31) && (event.keyCode < 45) || (event.keyCode > 57)) {

      event.returnValue = false;

   }

}

// 숫자만 입력

function onlyNumber2(loc) {

   if(/[^0123456789]/g.test(loc.value)) {

      alert("숫자가 아닙니다.\n\n0-9의 정수만 허용합니다.");

      loc.value = "";

      loc.focus();

   }

}

javascript 함수는 위의 것을 쓰면되고 Input 에 key 입력시 event 객체가 가로채서 그 내용을

분석한후 event.returnValue = false 리턴하게 되면 더 이상 키의 값을 입력할수 없게 해준다.

이것을 활용하여 여러가지 입력형태의 제한을 만들어서 사용하면 유용할 것이다

<input type="text" name="aaa" style="ime-mode:disabled;" onkeypress="checkForNumber();"

onBlur="checkForNumber();" />

위의 예제에서 onKeypress 와 onBlur 이 같이 있는것은 MS 익스플로어에서는 onkeypress

이벤트가 먹히는데 크롬이나 기타 MS 외 브라우저에서는 onBlur 이 인식된다.

범용성을 위해 같이 넣어 두었다.

그리고 style="ime-mode:disalbed" 의 의미는 input 박스의 초기값을 한글/영문으로

변경해서 지정하기 위함이다.

<input type="text" name="m_name" style="ime-mode:active;"> //초기값이 한글자판

<input type="text" name="m_id" style="ime-mode:inactive;"> //초기값이 영문자판

Ctrl+v