고 정규식을 활용한 원하지 않는 문자 제거 코드들은 jQuery가 없어도 동작한다.
<html>
<head>
<script
src="https://code.jquery.com/jquery-1.12.4.min.js"
integrity="sha256-ZosEbRLbNQzLpnKIkEdrPv7lOy9C27hHQ+Xp8a4MxAQ="
crossorigin="anonymous"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#input1").keyup(function(event){
if(event.keyCode !=8){
var result = "keycode="+ event.keyCode + " value="+ String.fromCharCode(event.keyCode);
var preHtml = $("#result").html();
$("#result").html(preHtml+ "<br />" +result);
}
if($(this).val() ==""){
$("#result").empty();
}
});
$("#onlyNumber").keyup(function(event){
if (!(event.keyCode >=37 && event.keyCode<=40)) {
var inputVal = $(this).val();
$(this).val(inputVal.replace(/[^0-9]/gi,''));
}
});
$("#onlyAlphabet").keyup(function(event){
if (!(event.keyCode >=37 && event.keyCode<=40)) {
var inputVal = $(this).val();
$(this).val(inputVal.replace(/[^a-z]/gi,''));
}
});
$("#notHangul").keyup(function(event){
if (!(event.keyCode >=37 && event.keyCode<=40)) {
var inputVal = $(this).val();
$(this).val(inputVal.replace(/[^a-z0-9]/gi,''));
}
});
$("#onlyHangul").keyup(function(event){
if (!(event.keyCode >=37 && event.keyCode<=40)) {
var inputVal = $(this).val();
$(this).val(inputVal.replace(/[a-z0-9]/gi,''));
}
});
});
</script>
</head>
<body>
숫자만: <input type="text" id="onlyNumber" /> <br />
영문만: <input type="text" id="onlyAlphabet" /> <br />
영문,숫자만:<input type="text" id="notHangul" /><br />
한글만:<input type="text" id="onlyHangul" /><br />
keyCode: <input type="text" id="input1" />
<div id="result">
</div>
</body>
</html>
2013 /10/ 05 IE 버그 수정
고 정규식을 활용한 원하지 않는 문자 제거 코드들은 jQuery가 없어도 동작한다.
<html>
<head>
<script
src="https://code.jquery.com/jquery-1.12.4.min.js"
integrity="sha256-ZosEbRLbNQzLpnKIkEdrPv7lOy9C27hHQ+Xp8a4MxAQ="
crossorigin="anonymous"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#input1").keyup(function(event){
if(event.keyCode !=8){
var result = "keycode="+ event.keyCode + " value="+ String.fromCharCode(event.keyCode);
var preHtml = $("#result").html();
$("#result").html(preHtml+ "<br />" +result);
}
if($(this).val() ==""){
$("#result").empty();
}
});
$("#onlyNumber").keyup(function(event){
if (!(event.keyCode >=37 && event.keyCode<=40)) {
var inputVal = $(this).val();
$(this).val(inputVal.replace(/[^0-9]/gi,''));
}
});
$("#onlyAlphabet").keyup(function(event){
if (!(event.keyCode >=37 && event.keyCode<=40)) {
var inputVal = $(this).val();
$(this).val(inputVal.replace(/[^a-z]/gi,''));
}
});
$("#notHangul").keyup(function(event){
if (!(event.keyCode >=37 && event.keyCode<=40)) {
var inputVal = $(this).val();
$(this).val(inputVal.replace(/[^a-z0-9]/gi,''));
}
});
$("#onlyHangul").keyup(function(event){
if (!(event.keyCode >=37 && event.keyCode<=40)) {
var inputVal = $(this).val();
$(this).val(inputVal.replace(/[a-z0-9]/gi,''));
}
});
});
</script>
</head>
<body>
숫자만: <input type="text" id="onlyNumber" /> <br />
영문만: <input type="text" id="onlyAlphabet" /> <br />
영문,숫자만:<input type="text" id="notHangul" /><br />
한글만:<input type="text" id="onlyHangul" /><br />
keyCode: <input type="text" id="input1" />
<div id="result">
</div>
</body>
</html>
2013 /10/ 05 IE 버그 수정
<html>
<head>
<title>
input handler test
</title>
<script
src="https://code.jquery.com/jquery-1.12.4.min.js"
integrity="sha256-ZosEbRLbNQzLpnKIkEdrPv7lOy9C27hHQ+Xp8a4MxAQ="
crossorigin="anonymous"></script>
<script type="text/javascript">
/*
conditions
- jquery obj for input
- data type(AP: alphabet, N: number, HA: hangul, AN: alphanumeric)
- event type (click, keydown, keypress, keyup(*default) ...)
- handler binded event type (*optional)
- max length( *optional)
*/
function addInputHandler(conditions){
var $input = conditions.input;
var dataType = conditions.dataType;
var eventType = conditions.eventType;
if ((!$input) || (!dataType)) {
throw {error:"NotEnoughArguments", errorMsg:"required argument is missing " +((!$input)?" target input element":" dataType")}
return;
}
if ($input[0].tagName != "INPUT") {
throw {error:"IlregalTargetElement", errorMsg:"target element is not input"};
return;
}
if ((!eventType)) {
eventType = "keyup";
}
var handlerFunc = conditions.handler;
if ((!handlerFunc)) {
handlerFunc = function(event){
$("#divKeyCode").empty().html("<span> event key code = "+event.keyCode+"</span>");
var regEx = null;
if (dataType == "N") {
regEx = /[^0-9]/gi;
} else if (dataType == "AP") {
regEx = /[^a-z]/gi;
}else if (dataType == "AN") {
regEx = /[^a-z0-9]/gi;
}else if (dataType == "HA") {
regEx = /[a-z0-9]/gi;
}else{
throw {error:"IlregalDataType", errorMsg:"dataType("+dataType+") is incorrect"}
}
remainOnlyTargetValue(regEx, $input,event);
//return true;
}; // end of handlerFunc
} // end of if to check handlerFunc
$input.on(eventType,handlerFunc);
if (conditions.maxlength) {
$input.attr("maxlength",conditions.maxlength);
}
}
function remainOnlyTargetValue(regEx, $input,event) {
if ((!(event.keyCode >=34 && event.keyCode<=40)) && event.keyCode != 16) {
var inputVal = $input.val();
if (regEx.test(inputVal)) {
$input.val(inputVal.replace(regEx,''));
}
}
}
$(document).ready(function(){
try {
addInputHandler({input:$("#onlyNumber"),dataType:"N",maxlength:7});
addInputHandler({input:$("#onlyAlphabet"),dataType:"AP"});
addInputHandler({input:$("#alphaNumeric"),dataType:"AN"});
addInputHandler({input:$("#hangul"),dataType:"HA"});
} catch(e) {
console.log(e);
}
});
</script>
</head>
<body>
<label for="onlyNumber">onlyNumber:</label><input type="text" name="onlyNumber" id="onlyNumber" /> <br />
<label for="onlyAlphabet">onlyAlphabet:</label><input type="text" name="onlyAlphabet" id="onlyAlphabet" /> <br />
<label for="alphaNumeric">alphaNumeric:</label><input type="text" name="alphaNumeric" id="alphaNumeric" /> <br />
<label for="hangul">hangul:</label><input type="text" name="hangul" id="hangul" /> <br />
<select name="testSelect" id="testSelect">
<option value="1">1</option>
</select>
<div id="divKeyCode"></div>
</body>
</html>
'개발 > Script' 카테고리의 다른 글
| sweet alert2 (0) | 2020.04.08 |
|---|---|
| [jquery] jquery obj(오브젝트) 확인(출력)하는 방법 (1) | 2019.03.18 |
| [jquery] 공백제거/ 공백없애기 (0) | 2018.05.08 |
| [jquery]|제이쿼리 :: selectbox 동적 추가 하기 (0) | 2018.03.28 |
| jQuery를 활용한 menu 자동 active 하기 (0) | 2017.09.22 |