메뉴 건너뛰기

조회 수 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
번호 제목 날짜 조회 수
59 document.getElementById() 처럼 DOM 객체 얻기 2016.09.21 6810
58 jquery enter key event submit (jquery 엔터키 이벤트) 2016.11.17 6857
57 jQuery Cookie 2016.09.21 6864
56 항상 레이어가 정 가운데 위치하는 스크립트 2016.12.22 6908
55 jQuery Selector (셀렉터) 2016.11.18 6931
54 jQuery Quick API file 2016.09.13 6934
53 jQuery, JavaScript 새로고침(reload) 2016.11.17 6951
52 jquery function 생성 2016.09.11 6963
51 시간 카운트 2016.12.22 7108
50 이미지 클릭 손 (cursor:pointer) 2016.11.18 7118
49 html 테이블 고정 (table fixed) 2016.11.18 7118
48 getScript() 2016.09.21 7125
» 벨리데이션 체크 / validator / 자동 입력 제한 2016.09.09 7142
46 화면 이동시에 레이어가 따라다니게 하기 2016.09.21 7143
45 jquery 라디오버튼 선택 확인, 체크박스 선택 확인, 셀렉트박스 선택 확인 2016.11.17 7149
44 [jQuery Plugin] FCKeditor 2.6.5 사용법 2016.09.11 7179
43 zeroclipboard - 클립보드 복사하기(자바스크립트 클립보드 복사하기) 2016.10.06 7181
42 간단한 세로 메뉴 file 2016.09.21 7306
41 날짜 검색 범위 정하기 (jquery) file 2016.11.17 7320
40 예제로 만나보는 제이쿼리 - 비동기 파일업로드 file 2017.03.06 7344
Board Pagination Prev 1 2 3 4 5 6 7 8 9 Next
/ 9

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

© k2s0o1d4e0s2i1g5n. All Rights Reserved