키 입력을 감지해서 허용되지 않은 입력값을 바로바로 잡아주는 예제이다.
예를 들면 전화번호를 입력 받는 곳에 꼭 문자를 집어넣는 애들이 있다.
강제로 jquery 를 이용해서 함수를 바인드해놓고
포커스와 포커스 아웃을 이용해서 자동으로 문자 하나 하나 입력이 들어왔을 때 체킹하고 잘못된 입력은 삭제하는 방법이다.
1. 사용방법은 단순히 체크하고 싶은 클레스만 지정해주면 된다.
<input id="nNum" type="text" class="number">
<input id="nNum" type="text" class="onlyEnglishUpper">
2. js 파일을 만들어서 import한다.
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 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 | /* * * 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); }); |
