이야기앱 세상

자바스크립트 - input 태그에 숫자만 입력되게 하기 본문

IT/JavaScript

자바스크립트 - input 태그에 숫자만 입력되게 하기

storya 2016. 3. 24. 19:38

1. isNaN 함수를 이용한 방법, IE와 파폭 호환성을 위해 style='IME-MODE: disabled' 이용해 영문만 입력하게 설정

--------------------------------

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=EUC-KR">
<title>숫자만 입력하기</title>
<script type="text/javascript">

function checkNumber(){
    if(isNaN(document.getElementById("no").value)){
          alert("숫자만 입력하세요");
          document.getElementById("no").value="";
    }
}
</script>
</head>
<body>
<input type = "text" id="no" onkeyup="checkNumber()" name ="price" style='IME-MODE: disabled' />
</body>
</html>

--------------------------------------

2. 이벤트를 이용한 방법

IE와 파폭 호환성을 위해 파폭은 함수의 인자로 이벤트 객체를 받고 IE는 window.event로 직접 호출

style='IME-MODE: disabled' 이용해 영문만 입력하게 설정

--------------------------------------

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=EUC-KR">
<title>숫자만 입력하세요</title>
<script type="text/javascript">

function checkNumber(e){
 var event = window.event || e;

 if (event.keyCode<48 || (event.keyCode>57 && event.keyCode<96)|| event.keyCode>105)
  {
          alert("숫자만 입력하세요");
          document.getElementById("no").value="";
  }
}
window.onload = function() {
 document.getElementById("no").onkeyup = checkNumber;
}
</script>
</head>
<body>
<input type = "text" id="no" name ="price" style='IME-MODE: disabled' />
</body>
</html>

반응형
Comments