input 박스에 숫자만 입력하도록 하고자 할때 > 기술자료

• 목록

input 박스에 숫자 (예를 들어 전화번호, 생년월일) 등을 입력받고자 할때 숫자만 입력받고자 할때가 있을 것입니다.  입력후 숫자인지 아닌지를 체크하는 방법도 있지만, 초기부터 숫자외에는 입력을 허용하지 않는다면 더욱 편리할 것입니다.
아래는 숫자만 입력받도록 하는 방법입니다.




1. 
정상작동 :  IE 6  /  Edge  /  Chrome 47
작동안함 :  IE 11 /  Firefox 43

<script language="JavaScript" type="text/javascript">
<!--
  // 숫자만 입력되도록 하는 코드
  function onlyNumber()
  {
  //alert(event.keyCode);
    if ( ( (96<=event.keyCode) && (event.keyCode<=105) ) ||  ( (48<=event.keyCode) && (event.keyCode<=57) ) || (event.keyCode==8)  || (event.keyCode==37) || (event.keyCode==39) || (event.keyCode==9))
    {
      event.returnValue=true;
    }
    else
    {
      event.returnValue=false;
    }
  }
//-->
</script>

<input type="text" style="IME-MODE:disabled" onkeydown="onlyNumber();">


2. 
정상작동 :  IE 11  /  Edge  /  Chrome 47  /  FireFox 43

    <form>
        <p>
            <input type="text" onkeydown="return showKeyCode(event)">
            <span id="keyinfo"></span>
        </p>
    </form>
    <script>
        function showKeyCode(event) {
            event = event || window.event;
            var keyID = (event.which) ? event.which : event.keyCode;
            if( ( keyID >=48 && keyID <= 57 ) || ( keyID >=96 && keyID <= 105 ) )
            {
                return;
            }
            else
            {
                return false;
            }
        }
    </script>


3. 
정상작동 : IE 11 / Edge / Chrome / FireFox
    <input type="text" placeholder="숫자만 입력하세요" onkeydown='return onlyNumber(event)' onkeyup='removeChar(event)' style='ime-mode:disabled;'>
    <script>
        function onlyNumber(event){
            event = event || window.event;
            var keyID = (event.which) ? event.which : event.keyCode;
            if ( (keyID >= 48 && keyID <= 57) || (keyID >= 96 && keyID <= 105) || keyID == 8 || keyID == 46 || keyID == 37 || keyID == 39 ) 
                return;
            else
                return false;
        }
        function removeChar(event) {
            event = event || window.event;
            var keyID = (event.which) ? event.which : event.keyCode;
            if ( keyID == 8 || keyID == 46 || keyID == 37 || keyID == 39 ) 
                return;
            else
                event.target.value = event.target.value.replace(/[^0-9]/g, "");
        }
    </script>


참고자료
http://webskills.kr/archives/310