메뉴 건너뛰기

조회 수 4405 추천 수 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
번호 제목 날짜 조회 수
24 날짜 검색 범위 정하기 (jquery) file 2016.11.17 4135
23 Input TYPE=“File” 을 히든으로 하고 외부 버튼을 눌러서 파일을 선택 2016.09.21 4107
22 다른 프레임에 있는 객채 참조하는 방법 2016.09.21 4090
21 금액단위 제거 표기 2016.12.22 4080
20 load() 메소드 2016.09.21 3998
19 jquery 뒤로가기 2016.11.17 3978
18 scrolling to top 2016.12.22 3870
17 속성선택자를 이용해서 링크에 스타일 입히기 2016.09.21 3855
16 jquery css div, li 리스트 선택한 메뉴 변경 출처: http://okkks.tistory.com/1062 [이건없지] file 2017.07.04 3410
15 jQuery 유효성 검사 2018.07.04 481
14 jquery 체크박스 배열 처리. 변수 하나에 담기. 2018.07.04 479
13 jQuery selectBox 컨트롤. 2018.07.24 412
12 [jQuery] input 박스에 maxlength 만큼 입력했을 때 자동으로 다음 박스로 이동하기 2018.09.06 151
11 [jQuery] split, join 으로 공백제거 하기 2018.09.06 148
10 jquery - select option 선택값 가져오기 2018.09.06 136
9 [jQuery] 셀렉트박스에서 특정 옵션 선택시 레이어 나타내기 2018.09.27 115
8 드래그 & 드랍 구현 - on()[이벤트리스너] file 2018.09.06 114
7 페이지 이동 제어 - href, replace, pushState() 2018.09.06 114
6 [jQuery] 확인 창(confirm), 페이지 이동(location.replace) 2018.09.06 112
5 특정영역 제외하고 body 클릭 2018.09.27 108
Board Pagination Prev 1 2 3 4 5 Next
/ 5

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

© k2s0o1d4e0s2i1g5n. All Rights Reserved