본문 바로가기

퍼블리싱/jQeury, Javascript

input type="text"에 숫자만 입력하도록

모바일이나 브라우저 ie 상위버전 등에서는 html5의 폼요소로 input type="tel"이나 type="number"를 쓸 수 있어서 매우 편리하나, 하위버전에서는 아직까지 쓰기 힘들다.

그래서 다음처럼 스크립트로 처리해준다.


<!doctype html>
<html lang="ko">
<head>
    <meta charset="utf-8">
    <title>input 에 숫자만 입력</title>
    <script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
    <script src="http://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
    <script>
    $(function(){
       $('.num').on('keypress', function(e){
            var charCode = e.which || e.keyCode;

            if (charCode > 31 && (charCode < 48 || charCode > 57)){
                alert("숫자만 입력하세요");
                return false;
            }
            return true;
        });
    });

    </script>
</head>
<body>   
   <input type="text" class="num" />
</body>
</html>

'퍼블리싱 > jQeury, Javascript' 카테고리의 다른 글

윈도우 팝업 열기(가운데정렬)  (0) 2016.01.19
KeyCodes  (0) 2015.07.28
Swipe 플러그인 모음  (0) 2015.06.25
== 과 ===의 차이  (0) 2015.05.27
useragent, os 체크해서 <html>에 class로 추가하기  (0) 2015.05.15