상세 컨텐츠

본문 제목

inputbox 숫자만 입력 (음수,양수)

JavaScript & HTML

by husks 2017. 4. 27. 17:58

본문

반응형


폼에서 입력값을 받다보면 숫자만 입력 받고 싶은경우가 발생합니다.

아래의 예제 소스를 참고하셔서 개발하시면 될 듯합니다. (정규식을 쓰고 싶으나 제가 정규식을 몰라서 ㅠㅠ)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
<!doctype html>
<html lang="kr">
<head>
  <meta charset="utf-8">
  <title>demo</title>
  <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
  <script>
    
    $(document).ready( function() {
    
        //숫자만
        $(".onlyNumber").keyup(function(event){
            
            var str;
                            
            if(event.keyCode != 8){
                if (!(event.keyCode >=37 && event.keyCode<=40)) {
                    var inputVal = $(this).val();
                    
                    str = inputVal.replace(/[^-0-9]/gi,'');
                    
                    if(str.lastIndexOf("-")>0){ //중간에 -가 있다면 replace
                        if(str.indexOf("-")==0){ //음수라면 replace 후 - 붙여준다.
                            str = "-"+str.replace(/[-]/gi,'');
                        }else{
                            str = str.replace(/[-]/gi,'');
                        }
                    
                    }
                                            
                    $(this).val(str);
                    
                }                    
            }
 
        });
        
    });
      
  </script>
</head>
<body>
    <br>
    숫자만 입력 가능: <input type="text" class="onlyNumber"/>
    <br>
    <br>
</body>
</html>



반응형
저작자표시 비영리 변경금지

'JavaScript & HTML' 카테고리의 다른 글

jQuery를 이용한 테이블 셀병합 - 통계 등  (0) 2017.05.10
자바 스크립트 동적 이벤트  (0) 2017.05.02
javascript 개행 replace (javascript replace newline to br)  (0) 2017.03.17
jquery 디데이 계산 (D-day, Dday)  (4) 2016.10.11
jquery 라디오버튼 선택 확인, 체크박스 선택 확인, 셀렉트박스 선택 확인  (0) 2016.09.27

관련글 더보기

댓글 영역

티스토리툴바