정규식을 사용하여 숫자만, 영문만, 영문과 숫자만 그리고 우리 위대한 한글만 입력할 수 있게 하였다.
테스트는 윈도우즈 크롬, 맥 크롬, 맥 사파리, 우분투 파폭에서 해보았고 모두 정상 작동 하는것을 확인하였다. 이벤트 keyCode를 받아 처리하는 코드도 보았지만 이 방법이 코딩도 적고 간단하여 구현해보았다. 정규식 참 요긴하게 쓰인다. 날잡아서 정규식을 다시 한번 봐야겠다.
수정사항
- 입력된 keyCode값을 알아내는 부분 (*$("#input1").keyup(function(event){) 을 keydown에서 keyup으로 변경. keydown으로 했을 경우 첫입력 글자가 누락되는 현상이 있어 수정
- 숫자만, 영문만, 영문 그리고 숫자만 입력 받는 부분에서 정규식만 사용할 경우 방향키도 막아버리는 오류가 있어 입력된 keycode값이
방향키가 아닐 경우만 처리하도록 분기처리
- 그리고 위대한 한글만 입력 받는 부분 추가. (한글만 받는 부분은 당연 입력된 문자에서 영문과 숫자가 있으면 해당 부분을 공백으로 대체하여 한글만 입력되는 효과를 낸것이다. 물론 다른 부분도 마찮가지.)
<html>
<head>
<script type="text/javascript" src="../js/jquery.js"></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 type="text/javascript" src="../js/jquery.js"></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>
덧글|덧글 쓰기