메뉴 건너뛰기

조회 수 7142 추천 수 0 댓글 0
?

단축키

Prev이전 문서

Next다음 문서

크게 작게 위로 아래로 댓글로 가기 인쇄
?

단축키

Prev이전 문서

Next다음 문서

크게 작게 위로 아래로 댓글로 가기 인쇄

키 입력을 감지해서 허용되지 않은 입력값을 바로바로 잡아주는 예제이다.

 

 

예를 들면 전화번호를 입력 받는 곳에 꼭 문자를 집어넣는 애들이 있다.

 

강제로 jquery 를 이용해서 함수를 바인드해놓고

 

포커스와 포커스 아웃을 이용해서 자동으로 문자 하나 하나 입력이 들어왔을 때 체킹하고 잘못된 입력은 삭제하는  방법이다.

 

 

 

 

1. 사용방법은 단순히 체크하고 싶은 클레스만 지정해주면 된다.

<input id="nNum" type="text" class="number">
<input id="nNum" type="text" class="onlyEnglishUpper">

 

 

 

 


 

2. js 파일을 만들어서 import한다.

 /*
     * 
     * jquery class선택자를 이용하여 자동 formatter구현
     */
    // 0) common
    function addComma(str) {
        if (str == null) {
            return "";
        }
        str = removeComma(str);
        x = str.split(".");// 소수부분리
        x1 = x[0];
        x2 = x.length > 1 ? "." + x[1] : "";
        var regex = /(\d+)(\d{3})/;
        while (regex.test(x1)) {
            x1 = x1.replace(regex, "$1" + "," + "$2");
        }
        return x1 + x2;
    }
 
    function removeComma(str) {
        str += "";
        var regex = /,/g;
        return str.replace(regex, "");
    }
 
    function formatComma(e) {
        if (keyFilter(e)) {
            $(this).val(addComma($(this).val()));
        }
    }
 
    function formatSelect() {
        $(this).select();
    }
 
    // <-(37) , ->(39)를 제외한 keyup에서만 동작
    function keyFilter(e) {
        if (e.keyCode == 37 || e.keyCode == 39)
            return false;
        else
            return true;
    }
    /**
     * flag : g = global, i = ignore case, m = multiline ^ =
     */
    // 1) money - 100,000
    function restrictMoney(e) {
        if (keyFilter(e)) {
            var regex = /[^0-9]/g;
            $(this).val($(this).val().replace(regex, ""));
        }
    }
 
    // 2) number - 100,000.00
    function restrictNumber(e) {
        if (keyFilter(e)) {
            var regex = /[^0-9\.]/g;
            $(this).val($(this).val().replace(regex, ""));
        }
    }
 
    // 3) decimal - 100000.00
    function restrictDecimal(e) {
        if (keyFilter(e)) {
            var regex = /[^0-9\.]/g;
            $(this).val($(this).val().replace(regex, ""));
        }
    }
 
    // 4) onlyNumber - 1234567890
    function restrictOnlyNumber(e) {
        if (keyFilter(e)) {
            var regex = /[^0-9]/g;
            $(this).val($(this).val().replace(regex, ""));
        }
    }
    // 5) onlyEnglish - a-z,A-Z
    function restrictOnlyEnglish(e) {
        if (keyFilter(e)) {
            var regex = /[^a-z]/gi;
            $(this).val($(this).val().replace(regex, ""));
        }
    }
    // 5-1) onlyEnglishUpper - A-Z
    function restrictOnlyEnglishUpper(e) {
        if (keyFilter(e)) {
            var regex = /[^a-z]/gi;
            $(this).val($(this).val().replace(regex, "").toUpperCase());
        }
    }
    // 5-2) onlyEnglishLower - a-z
    function restrictOnlyEnglishLower(e) {
        if (keyFilter(e)) {
            var regex = /[^a-z]/gi;
            $(this).val($(this).val().replace(regex, "").toLowerCase());
        }
    }
    // 6) forCode - 0-9,A-Z
    function restrictForCode(e) {
        if (keyFilter(e)) {
            var regex = /[^0-9a-z\_]/gi;
            $(this).val($(this).val().replace(regex, "").toUpperCase());
        }
    }
    // 7) forId - 0-9,A-Z,특수문자(_-!@#$%^)
    function restrictForId(e) {
        if (keyFilter(e)) {
            var regex = /[^0-9a-z\_\-\!\@\#\$\%\^]/gi;
            $(this).val($(this).val().replace(regex, ""));
        }
    }
 
    // 파일 확장자 체크
    function restrictFileExtension(e) {
        var ext = $(this).val().split('.').pop().toLowerCase();
 
        if ($.inArray(ext, [ 'exe', 'bat', 'sh' ]) > 0) {
            $(this).replaceWith($(this).clone(true));
            // $(this).val("");
 
            alert('허용되지 않는 확장자입니다.');
        } // end if $.inArray(ext, ['exe', 'bat', 'sh']) > 0
    }
 
    //파일 확장자 체크 Img
    function restrictFileExtensionImg(e) {
        var ext = $(this).val().split('.').pop().toLowerCase();
 
        if ($.inArray(ext, [ 'gif', 'png', 'jpg', 'jpeg' ]) == -1) { // 허용하는 확장자가 작을 경우
            $(this).replaceWith($(this).clone(true));
            // $(this).val("");
 
            alert('허용되지 않는 확장자입니다.');
        } // end if $.inArray(ext, ['gif', 'png', 'jpg', 'jpeg']) == -1
    }
 
    // 99) class선택자로 keyup이벤트에 자동 바인딩
    $(document).ready(function() {
        // money
        $(".money").bind("keyup", restrictMoney);
        $(".money").bind("keyup", formatComma);
        $(".money").bind("focus", formatSelect);
 
        $(".money").bind("blur", restrictMoney);
        $(".money").bind("blur", formatComma);
        // number
        $(".number").bind("keyup", restrictNumber);
        $(".number").bind("keyup", formatComma);
        $(".number").bind("focus", formatSelect);
 
        $(".number").bind("blur", restrictNumber);
        $(".number").bind("blur", formatComma);
        // decimal
        $(".decimal").bind("keyup", restrictDecimal);
        $(".decimal").bind("focus", formatSelect);
 
        $(".decimal").bind("blur", restrictDecimal);
        // onlyNumber
        $(".onlyNumber").bind("keyup", restrictOnlyNumber);
        $(".onlyNumber").bind("focus", formatSelect);
 
        $(".onlyNumber").bind("blur", restrictOnlyNumber);
        // onlyEnglish
        $(".onlyEnglish").bind("keyup", restrictOnlyEnglish);
        $(".onlyEnglish").bind("focus", formatSelect);
 
        $(".onlyEnglish").bind("blur", restrictOnlyEnglish);
        // onlyEnglishUpper
        $(".onlyEnglishUpper").bind("keyup", restrictOnlyEnglishUpper);
        $(".onlyEnglishUpper").bind("focus", formatSelect);
 
        $(".onlyEnglishUpper").bind("blur", restrictOnlyEnglishUpper);
        // onlyEnglishLower
        $(".onlyEnglishLower").bind("keyup", restrictOnlyEnglishLower);
        $(".onlyEnglishLower").bind("focus", formatSelect);
 
        $(".onlyEnglishLower").bind("blur", restrictOnlyEnglishLower);
        // forCode
        $(".forCode").bind("keyup", restrictForCode);
        $(".forCode").bind("focus", formatSelect);
 
        $(".forCode").bind("blur", restrictForCode);
        // forId
        $(".forId").bind("keyup", restrictForId);
        $(".forId").bind("focus", formatSelect);
 
        $(".forId").bind("blur", restrictForId);
 
        $(".fileExtension").bind("change", restrictFileExtension);
        $(".fileExtensionImg").bind("change", restrictFileExtensionImg);
    });
 



List of Articles
번호 제목 날짜 조회 수
119 jQuery 실행패턴 2017.03.02 6681
118 jQuery 예약어 $ 를 사용하지 못하는 경우 해결책 noConflict() 2016.09.21 6679
117 체크박스 또는 라디오 버튼의 체크여부 변경하기 2016.09.21 6667
116 슬라이드 쇼 file 2016.09.21 6611
115 jquery 뒤로가기 2016.11.17 6511
114 다른 프레임에 있는 객채 참조하는 방법 2016.09.21 6471
113 scrolling to top 2016.12.22 6470
112 load() 메소드 2016.09.21 6412
111 디자인 셀렉트 박스 & CSS 2016.12.22 6347
110 금액단위 제거 표기 2016.12.22 6217
109 jquery css div, li 리스트 선택한 메뉴 변경 출처: http://okkks.tistory.com/1062 [이건없지] file 2017.07.05 5794
108 jquery - select option 선택값 가져오기 2018.09.06 5330
107 jquery 체크박스 배열 처리. 변수 하나에 담기. 2018.07.04 4657
106 특정영역 제외하고 body 클릭 2018.09.28 3605
105 jQuery 유효성 검사 2018.07.04 3362
104 jQuery 기초 (txt 파일 가져오기 (load) , 클릭시에 배경색을 변경(json)) file 2019.01.16 3222
103 jquery 드래그 앤 드롭 파일 업로드 2019.05.21 3085
102 드래그 & 드랍 구현 - on()[이벤트리스너] file 2018.09.06 2888
101 jquery 팝업 차단 없이 띄우기 2019.03.05 2855
100 [jQuery] 확인 창(confirm), 페이지 이동(location.replace) 2018.09.06 2647
Board Pagination Prev 1 2 3 4 5 6 7 8 9 Next
/ 9

하단 정보를 입력할 수 있습니다

© k2s0o1d4e0s2i1g5n. All Rights Reserved