[Javascript] Input 입력박스(텍스트)의 키 제어.

[whitebono]

안녕하세요. 쥔장 입니다.

웹사이트에서 아이디/패스워드 작성시나 기타 입력창에 키보드를 제한적으로 쓰고 싶으실때가 있을 겁니다.

그때 사용하는 코드 입니다.

먼저 예를 들어

키제어가 필요한 폼에

<input type="text" id="id" name="id" tabindex="1" style="width: 100px;" /><br />
<input type="password" id="passwd" name="passwd" tabindex="2" style="width: 100px;" />

라는 코드가 있다고 합시다.

여기 id 와 passwd 에 키보드를 제한적으로 이용하게 하고 싶다.

(예를 들어 문자만 치고 숫자는 못치게 하고 싶다던가...)

할때, 다음과 같이 하세요.

먼저 아래 코드를 keyaccess.js 파일에 저장합니다.

//-------------- keyaccess.js ----------------------//

// #####################################################

// 페이지 로드시 실행

Event.observe(window, 'load', function() {
// 아이디
var ArrayUserId = ['user_id', 'id']; // 여기서 user_id 는 구분명으로 아무거나 입력, id 는 폼에 있는 id 입력할 id 이름
for ( var i = 0 ; i < ArrayUserId.length ; i++ ){
if ( $(ArrayUserId[i]) ) {
Event.observe(ArrayUserId[i], 'keydown', SQLInjection.checkID);
}
}

// 패스워드
var ArrayPasswd = ['user_pwd', 'passwd']; // 여기서 user_pwd 는 구분명으로 아무거나 입력, passwd 는 폼에 있는 패스워드 입력할 id 이름
for ( var i = 0 ; i < ArrayPasswd.length ; i++ ){
if ( $(ArrayPasswd[i]) ) {
Event.observe(ArrayPasswd[i], 'keydown', SQLInjection.checkPasswd);
}
}

// ######################################################
// SQL Injection 공격을 방어하기 위한 함수
var SQLInjection = {
emailfilter : /^\w+[\+\.\w-]*@([\w-]+\.)*\w+[\w-]*\.([a-z]{2,4}|\d+)$/i,
specialChar : /^[A-Za-z0-9_]/,
checkID: function() {

// 여기에 제어하고 싶은 종류들을 아래처럼 입력.

if ( SQLInjection.clickNumber() ) return true; // 숫자만 입력하게 함.
if ( SQLInjection.clickGeneralChar() ) return true; // 일반 문자만 입력하게 함.
if ( SQLInjection.clickSpecialKey() ) return true; // 특수문자를 입력하게 함.
if ( SQLInjection.clickActionKey() ) return true; // 백스페이스등 특수키를 입력하게 함.
event.returnValue = false; // 그 이외의 키가 눌리면 동작 안함.
return false;
},

checkPasswd: function() {
// 위의 아이디와 같은 방식으로 사용.
if ( SQLInjection.clickNumber() ) return true;
if ( SQLInjection.clickGeneralChar() ) return true;
if ( SQLInjection.checkAllAllowedKey() )return true;
if ( SQLInjection.clickHyphen() ) return true;
if ( SQLInjection.clickSpecialKey() ) return true;

event.returnValue = false;
return false;
},
checkNumber : function () {
if ( SQLInjection.clickNumber() ) return true;
if ( SQLInjection.checkAllAllowedKey() )return true;

event.returnValue = false;
return false;
},
checkAllAllowedKey : function () {
if ( SQLInjection.clickActionKey() ) return true;
if ( SQLInjection.clickHome() ) return true;
if ( SQLInjection.clickEnd() ) return true;
if ( SQLInjection.clickLeftArrow() ) return true;
if ( SQLInjection.clickRightArrow() ) return true;

return false;
},
checkEmail: function (event, obj){

if ( !obj.getAttribute("nullcheck") ) {
if ( !obj.value ) return false;
}
var returnval=SQLInjection.emailfilter.test(obj.value);

if ( !returnval ){
alert(‎"올바른 이메일 주소를 넣으시오.");
event.returnValue = false;
if ( !obj.getAttribute("nullcheck") ) {
obj.focus();
}
return false;
}

return returnval;
},
clickNumber : function () {
// ( event.keyCode > 47 && event.keyCode < 58 ) : 키보드 위쪽 숫자
// ( event.keyCode > 95 && event.keyCode < 106 ) : 키패드에 있는 숫자
if ( window.event.shiftKey ) {
// alert (‎ 'false' );
return false;
}
else {
// alert (‎ 'true' );
return ( ( ( event.keyCode > 47 && event.keyCode < 58 ) || ( event.keyCode > 95 && event.keyCode < 106 ) ) && !( window.event.shiftKey ) ) ? true : false;
}
},
clickGeneralChar : function () {
// ( event.keyCode > 64 && event.keyCode < 91 ) : A ~ Z 문자
return ( event.keyCode > 64 && event.keyCode < 91 ) ? true : false;
},
clickActionKey : function () {
// ( event.keyCode == 8 || event.keyCode == 46 || event.keyCode == 9 ) : 8 : Backspace, 46 : Delete, 9 : Tab Key
return ( event.keyCode == 8 || event.keyCode == 46 || event.keyCode == 9 ) ? true : false;
},
clickNumberKey : function () {
return ( ( event.keyCode > 47 && event.keyCode < 58 ) || ( event.keyCode > 95 && event.keyCode < 106 ) ) ? true : false;
},
clickHyphen : function () {
return ( event.keyCode == 189 && window.event.shiftKey ) ? true : false;
},
clickBackSpace : function () {
return ( event.keyCode == 8 ) ? true : false;
},
clickDelete : function () {
return ( event.keyCode == 46 ) ? true : false;
},
clickTab : function () {
return ( event.keyCode == 9 ) ? true : false;
},
clickSharp : function () {
return ( event.keyCode == 8 ) ? true : false;
},
clickShift : function () {
return ( window.event.shiftKey ) ? true : false;
},
clickCtrl : function () {
return ( window.event.ctrlKey ) ? true : false;
},
clickHome : function () {
return ( event.keyCode == 36 ) ? true : false;
},
clickEnd : function () {
return ( event.keyCode == 35 ) ? true : false;
},
clickLeftArrow : function () {
return ( event.keyCode == 37 ) ? true : false;
},
clickRightArrow : function () {
return ( event.keyCode == 39 ) ? true : false;
},
clickKoreanKey : function () {
return (event.keyCode == 229 ) ? true : false;
},
clickSpecialKey : function () {
return ( ( event.keyCode > 47 && event.keyCode < 58 ) && ( window.event.shiftKey ) ) ? true : false;
},
checkMemo: function(event) {

if ( SQLInjection.clickNumber() ) return true;
if ( SQLInjection.clickGeneralChar() ) return true;

if ( SQLInjection.checkAllAllowedKey() ) return true;

//event.returnValue = false;
//return false;
} ,
checkSpecialChar : function (event) {
} ,
checkGeneralChar : function (event) {
},
isHangul : function (s) {
var len;
len = s.length;

for (var i = 0; i < len; i++) {
if (s.charCodeAt(i) != 32 && (s.charCodeAt(i) < 44032 || s.charCodeAt(i) > 55203))
return false;
}

return true;
},
isValidPhone : function (input) {
var format = /^(\d+)-(\d+)-(\d+)$/;
return format.test(input);
},
isSpecialChar : function (_input) {
var specialChar = /[!@#$%^*+"'<>?`]/;
return specialChar.test(_input)
},
isValidEamil : function (str){
if(str == ""){
alert(‎"이메일 주소를 입력하세요.");
return false;
}
var retVal = checkSpace( str );
if( retVal ) {
alert(‎"이메일 주소를 빈공간 없이 넣으세요.");
return false;
}

if( -1 == str.indexOf('.') ) {
alert(‎"이메일 형식이 잘못 되었습니다.");
return false;
}

/* checkFormat */
var isEmail = /[-!#$%&'*+\/^_~{}|0-9a-zA-Z]+(\.[-!#$%&'*+\/^_~{}|0-9a-zA-Z]+)*@[-!#$%&'*+\/^_~{}|0-9a-zA-Z]+(\.[-!#$%&'*+\/^_~{}|0-9a-zA-Z]+)*/;
if( !isEmail.test(str) ) {
alert(‎"이메일 형식이 잘못 되었습니다.");
return false;
}
if( str.length > 60 ) {
alert(‎"이메일 주소는 60자까지 유효합니다.");
return false;
}

return true;
}
}

// ###################################################
// check submit

function checkSubmit(){

}

// ###################################################
// window [안내]태그제한으로등록되지않습니다-xxonload시 이벤트 등록
function addLoadEvent(func) {
var old[안내]태그제한으로등록되지않습니다-xxonload = window.[안내]태그제한으로등록되지않습니다-xxonload;

if ( typeof window.[안내]태그제한으로등록되지않습니다-xxonload != 'function' ) {
window.[안내]태그제한으로등록되지않습니다-xxonload = func;
}
else {
window.[안내]태그제한으로등록되지않습니다-xxonload = function() {
old[안내]태그제한으로등록되지않습니다-xxonload();
func();
}
}
}

// #################################################
// Event 추가..
function addBlurEvent(obj, func) {
var old[안내]태그제한으로등록되지않습니다-xxonblur‎ = obj.[안내]태그제한으로등록되지않습니다-xxonblur‎;

if ( typeof obj.[안내]태그제한으로등록되지않습니다-xxonblur‎ != 'function' ) {
obj.[안내]태그제한으로등록되지않습니다-xxonblur‎ = func;
}
else {
obj.[안내]태그제한으로등록되지않습니다-xxonblur‎ = function() {
old[안내]태그제한으로등록되지않습니다-xxonblur‎();
func(obj);
}
}
}

// space 가 있으면 true, 없으면 false
function checkSpace( str )
{
if(str.search(/\s/) != -1){
return true;
} else {
return false;
}
}

//------------------------ keyaccess.js 파일 끝 -----------------------------------//

이렇게 파일을 완성하셨으면 페이지 파일에 js 파일을 포함시켜주시면 끝입니다.

<script src="/js/keyaccess.js" type="text/xxjavascript"></script>

이런식으로요.

빨간색 부분을 집중적으로 연구해보시면 됩니다.

보시면 이메일 형식 체크하는 부분도 있습니다.

즐거운 하루 되세요.