Jquery, HTML

숫자만 입력가능 할수있는 input 박스 만들기

사과보단애플 2018. 1. 30. 14:43

input 박스의 type=number 라는 태그를 쓰는 것도 될수 있는데 그냥 script 로 구현 하는 소스가 있더라구 그래서 메모를 남긴다

<input id="number" type="number" value="42">



  • HTML 소스


<input type="text" onkeydown="return onlyNumber(event)" onkeyup="removeChar(event)"/>



  • 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, "");

     }



또 있다!!


  • HTML 소스

<input type="text" onkeydown="numberonly(event);"/>

  • Script 소스

function numberonly(e) {

  var key, obj = e.srcElement||e.target;

  key = e.keyCode;

  if(key == 8) return;

  if(key == 9) return;

  if ((key < 45 || key > 57) && key < 96 || key > 105 && key != 109 && key != 189 ) {

    obj.blur();

    setTimeout(function() {

      obj.focus();

    },30);

  }

}



'Jquery, HTML' 카테고리의 다른 글

jstl 의 length 함수 쓰기 방법  (0) 2018.02.02