메뉴 건너뛰기

조회 수 4532 추천 수 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
번호 제목 날짜 조회 수
34 jquery 디데이 계산 (D-day,Dday) file 2016.11.17 5080
33 zeroclipboard - 클립보드 복사하기(자바스크립트 클립보드 복사하기) 2016.10.06 4744
32 load() 메소드 2016.09.21 4096
31 getJSON() 함수 2016.09.21 5087
30 속성선택자를 이용해서 링크에 스타일 입히기 2016.09.21 3939
29 getScript() 2016.09.21 4494
28 키보드 이벤트가 발생한 객체의 id값 알아내기 2016.09.21 4710
27 POST 방식으로 인수를 전달하고 그 결과를 받아오기 2016.09.21 4604
26 jQuery 예약어 $ 를 사용하지 못하는 경우 해결책 noConflict() 2016.09.21 4307
25 FORM 객체 초기화 하기 2016.09.21 4643
24 동적으로 콤보(select)의 항목(option) 생성하기 2016.09.21 6679
23 다른 프레임에 있는 객채 참조하는 방법 2016.09.21 4191
22 화면 이동시에 레이어가 따라다니게 하기 2016.09.21 4626
21 hover 메소드를 이용해서 메뉴 on, off를 구현 file 2016.09.21 5141
20 체크박스 또는 라디오 버튼의 체크여부 변경하기 2016.09.21 4472
19 jQuery Cookie 2016.09.21 4292
18 슬라이드 쇼 file 2016.09.21 4293
17 select box 값 변경, 목록 변경 2016.09.21 5054
16 document.getElementById() 처럼 DOM 객체 얻기 2016.09.21 4721
15 Input TYPE=“File” 을 히든으로 하고 외부 버튼을 눌러서 파일을 선택 2016.09.21 4223
Board Pagination Prev 1 2 3 4 5 Next
/ 5

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

© k2s0o1d4e0s2i1g5n. All Rights Reserved