JavaScript event.keyCode 자바스크립트 이벤트 키코드표

---------------------------------------
키코드표
---------------------------------------
←(백스페이스) = 8
TAB = 9
ENTER = 13
SHIFT = 16
CTRL = 17
ALT = 18
PAUSEBREAK = 19
CAPSLOOK = 20
한/영 = 21
한자 = 25
ESC = 27
스페이스 = 32

PAGEUP = 33
PAGEDN = 34
END = 35
HOME =36
←(중간) = 37
↑(중간) = 38
→(중간) = 39
↓(중간) = 40
INSERT = 45
DELETE = 46

0 = 48
1 = 49
2 = 50
3 = 51
4 = 52
5 = 53
6 = 54
7 = 55
8 = 56
9 = 57

A = 65
B = 66
C = 67
D = 68
E = 69
F = 70
G = 71
H = 72
I = 73
J = 74
K = 75
L = 76
M = 77
N = 78
O = 79
P = 80
Q = 81
R = 82
S = 83
T = 84
U = 85
V = 86
W = 87
X = 88
Y = 89
Z = 90

윈도우(왼쪽) = 91
윈도우(오른쪽) = 92
기능키 = 93

0(오른쪽) = 96
1(오른쪽) = 97
2(오른쪽) = 98
3(오른쪽) = 99
4(오른쪽) = 100
5(오른쪽) = 101
6(오른쪽) = 102
7(오른쪽) = 103
8(오른쪽) = 104
9(오른쪽) = 105

.(오른쪽) = 110
/(오른쪽) = 111
*(오른쪽) = 106
+(오른쪽) = 107
-(오른쪽) = 109

F1 = 112
F2 = 113
F3 = 114
F4 = 115
F5 = 116
F6 = 117
F7 = 118
F8 = 119
F9 = 120
F10 = 121
F11 = 122
F12 = 123

NUMLOCK = 144
SCROLLLOCK = 145
=(중간) = 187
-(중간) = 189
`(왼쪽콤마) = 192
\(중간) = 220
--------------------코드값알기---------------------
안녕하세요.
event.keyCode를 사용하시는 분들중에서 코드를 몰라서 못쓰시는 분들이 있을것
같아서 올립니다. 분명히 말씀드리지만 아시는 분들도 계실겁니다.
모르는 분들을 위해 올리는 것입니다. 혹시나 아신다고 욕쓰고 그러지 마십시요.
저번에도 알고리즘 하나 올렸는데 욕무지쓰셔서 속상했습니다..ㅠㅠ
그럼 즐거운하루 되시고...

그리고 코드를 알아낼수있는 방법은 다음과 같습니다.
<html>
<head>
<script>
function key_check(){
alert!("키번호는 [" +event.keyCode+ "] 입니다.");
}
</script>
</head>
<body onKeyDown='key_check();'>
알고싶은 키패드를 꽉! 눌러주세요...ㅡㅡ;
</body>
</html>

-------------------사용법-------------------------
필드 입력하고 나서 엔터 때리면 이벤트 발생
event.keyCode 의 키표를 보고 어떤걸 누룰것이지?
<input type="text" name="ccc"
omKeyDown="javascript:if(event.keyCode==13){alert!('ok!');}" >

-------------------------------------
출처 두군데것 조합 햇음


  1. 혜령 2011.01.07 22:05 신고

    감사합니다 ㅎㅎㅎㅎㅎㅎㅎ 저한테는 무지 유용한 정보 입니다. ㅎㅎ

  2. DoubleJH 2011.05.09 12:53 신고

    저한테도 무지 유용한 정보였어요~^^

  3. 김준혁 2013.10.20 10:26 신고

    감사합니다!
    아! 그리고 '코드값알기'의 9번째 줄 body 부분에 오타 나신 것 같네요.. (omKeyDown ⇒ onKeyDown)



보통 자바스크립트로는 팝업. (window.open) 메소드를 이용한 팝업으로 이루어진다.

우편번호, 공지, 광고 등등

사용중 팝업을 이용하여 필수 정보를 입력시 브라우저의 포커스로 인해 팝업창이 뒤로 숨고 부모창이

보여지는 경우가 허다함.

그래서 사용되는 것이 javascript의 showModalDialog(); 유용한 함수 소개


사용방법:

새 창을 열고 (팝업), 거기에 HTML을 표시하는 방법.
모달 (modal)이란 모덜리스 의 반대로 해당 윈도우가 열려있는 동안 다른 창을 조작할 수 없다.

(모달 대화 상자를 연 창만이 조작할 수없는 경우 윙도우모달 다른 창을 모두가 작동하지 않을 경우
시스템모달 라고 부르는 것 같은 느낌이 들었는데, JavaScript에서 윙도우모달 택일)



showModalDialog ()의 제 3 인수
매개 변수 이름 가능한 값 설명
dialogWidth 숫자. 단위 필수 대화의 너비
dialogHeight 숫자. 단위 필수 대화 상자의 높이
dialogLeft 숫자. 단위 필수 대화의 X 좌표
dialogTop 숫자. 단위 필수 대화의 Y 좌표
center 真偽値 불리언 대화 상자를 화면 중앙에 있는지 여부. dialogLeft,dialogTopdialogLeft, dialogTop가 지정되어 있으면 해제
status 真偽値 불리언 대화 상태 표시줄을 낼지 여부
scroll 真偽値 불리언 (내용이 대화 상자의 크기보다 큰 경우) 스크롤바를 발행 여부
resizable 真偽値 불리언 대화 상자의 크기를 변경할 수 있는지 여부
help 真偽値 불리언 대화 상단 표시줄 오른쪽의 도움말 단추 "?"를 발행 여부
minimize 真偽値 불리언 대화 상자 위쪽 막대의 오른쪽 끝에있는 최소화 버튼 "_"를 발행 여부
maximize 真偽値 불리언 대화 상자 위쪽 막대 오른쪽의 최대화 버튼 "□"를 발행 여부
border thin thin ?
unadorned 真偽値 불리언 ?
edge raised,sunken ?
dialogHide 真偽値 불리언 ?
font 数値 숫자 ?
※ 사실 값은 0,1, yes, no, on, off 중 하나







// 부모창

1 <SCRIPT>
2     var args = new Array();
3     args[“id”] = “id”;
4     args[“name”] = “name”;
5     var msgDialog = window.showModalDialog(url, args, ‘dialogWidth:320px; dialogHeight:200px; center:yes; help:no;     status:no; scroll:no; resizable:no’);
6     return msgDialog;
7 </SCRIPT>



//
자식창

IE 7과 관련해서 window.showModalDialog 로 불려질 때 , <base target=”_self” />입력해야

window.close() 가 정상적으로 작동하게 된다. IE 6 또한 일부 업데이트에 대해서 같은 반응을

보일때가 있다.

01 <HEAD>  
02 <BASE target=”_self”>
03 <SCRIPT>
04    // 부모창의 값을 꺼냄
05    var msg = window.dialogArguments[“id”];
06    var msg = window.dialogArguments[“name”]; 
07    var val = “값을 받아라”;
08    // 부모창으로 값을 넘김
09    window.returnValue = val;
10    window.close();
11 </SCRIPT>


opener가 있는 지 없는지 확인해서 있다면 그 페이지에서 원하는 페이지로 이동

포커스 준다.

만약 opener를 닫고 팝업창만 있다면 새창을 띄운다.

<script language=javascript>
<!--
function goURL(){
 var page = "이동페이지.html";

 if(조건에 맞다면){
  var openerType = typeof opener.location.href;

  if( openerType == 'string' ){
   opener.location.href=page;
   opener.focus();
  }else{
   window.open(page,'','');
  }
 }else{
  window.open(page,'','');
 }
}
//-->
</script>


PHP에서 iconv 사용가능 하여야 합니다.

 

function tostring($text) {
//    return iconv('UTF-16LE', 'UTF-8', chr(hexdec(substr($text[1], 2, 2))).chr(hexdec(substr($text[1], 0, 2))));
    
return iconv('UTF-16LE''UHC'chr(hexdec(substr($text[1], 22))).chr(hexdec(substr($text[1], 02
))));
}
function 
urlutfchr($text
){
    return 
rawurldecode(preg_replace_callback('/%u([[:alnum:]]{4})/''tostring'$text
));
}

 

처리할 문서가 charset euc-kr 일경우 함수 tostring 에서 iconv 2번째인자를 "UHC" 로

 utf8 일경우 "UTF-8"로 지정한다.

 

Ex

$escapeString = "%uC548%uB155%uD558%uC138%uC694";  // 자스에서 "안녕하세요"를 escape 한 문자열

$unEscapeString = urlutfchr($escapeString);

echo $unEscapeString;

 

// 출력결과

// 안녕하세요

<script language="javascript">
   var str1 = "Happy day";
   var str2 = "우리나라 좋은나라";
   
   document.write("<pre>");
   document.writeln(str1+" 앞글자만 대문자 변환 : "+"까먹었음");
   document.writeln(str1+" 대문자 변환 : "+str1.toUpperCase());
   document.writeln(str1+" 소문자 변환 : "+str1.toLowerCase());
   document.writeln();

   document.writeln(str1+" 글자 수 : "+str1.length);  // 공백 포함
   document.writeln(str2+" 글자 수 : "+str2.length);
   document.writeln();

   document.writeln(str1+" 의 indexOf('문자') : "+str1.indexOf("a"));    // 문자의 index 값 출력
   // 0부터 시작, 대소문자 구분, 중복될 경우 앞의 값 출력, 존재하지 않을 경우 -1 출력
   document.writeln(str2+" 의 indexOf('문자') : "+str2.indexOf("나"));
   document.writeln(str2+" 의 lastIndexOf('문자') : "+str2.lastIndexOf("나"));   // 중복될 경우 마지막 값 출력
   document.writeln();

   document.writeln(str1+" 의 charAt(index번호) : "+str1.charAt(0));    // index번호에 해당하는 문자 출력
   document.writeln(str2+" 의 charAt(index번호) : "+str2.charAt(3));
   document.writeln();

   document.writeln(str1+" 의 substring(index번호1, index번호2) : "+str1.substring(0,5));   // index번호1 부터 (index번호2 -1) 까지 문자 출력
   document.writeln(str1+" 의 substring(index번호1) : "+str1.substring(1));          // index번호2 생략시 문자열 끝까지 출력
   document.writeln(str1+" 의 substring(index번호1, -index번호2) : "+str1.substring(2,-1));  // index번호 음수는 불가
   document.writeln();

   document.writeln(str1+" 의 slice(index번호1, -index번호2) : "+str1.slice(2,-1));  // index번호가 음수일 경우 오른쪽 기준으로 0부터 시작
   document.writeln(str1+" 의 slice(index번호1) : "+str1.slice(1));
   document.writeln(str1+" 의 slice(index번호1, index번호2) : "+str1.slice(0,5));  // 음수를 제외하면 substring와 같다.
   document.writeln();

   document.writeln(str1+" 의 substr(index번호, length) : "+str1.substr(2,5));  // index번호 부터 length(글자 수) 만큼 출력
   document.writeln(str1+" 의 substr(index번호, length) : "+str1.substr(2,1));

   document.write("</pre>");
  </script>

 

--------------------------------------------------------------------------------------

 

Happy day 앞글자만 대문자 변환 : 까먹었음
Happy day 대문자 변환 : HAPPY DAY
Happy day 소문자 변환 : happy day

Happy day 글자 수 : 9
우리나라 좋은나라 글자 수 : 9

Happy day 의 indexOf('문자') : 1
우리나라 좋은나라 의 indexOf('문자') : 2
우리나라 좋은나라 의 lastIndexOf('문자') : 7

Happy day 의 charAt(index번호) : H
우리나라 좋은나라 의 charAt(index번호) : 라

Happy day 의 substring(index번호1, index번호2) : Happy
Happy day 의 substring(index번호1) : appy day
Happy day 의 substring(index번호1, -index번호2) : Ha

Happy day 의 slice(index번호1, -index번호2) : ppy da
Happy day 의 slice(index번호1) : appy day
Happy day 의 slice(index번호1, index번호2) : Happy

Happy day 의 substr(index번호, length) : ppy d
Happy day 의 substr(index번호, length) : p
  1. eloveelove 2009.07.28 18:33 신고

    티스토리 로그인 해야만 댓글을 작성하네요. 오픈 해보세요. 본문 에 있는것으로 간단한 예제를 하나 만들어서 응용 해보고 결과를 알려주는식으로 포스트 했으면 좋을듯 하네요.

    • 사짜 참을인 2009.07.30 10:26 신고

      제 블로그 설정이 어떻게 되어있는지도 모르고 있었네요. 하하
      예제소스를 만들어서 넣기에는 개발업무 도중에 알게 된 한뭉텅이 지식 보관용이다 보니 ^^;;; (귀차니즘)
      완성된 소스를 조금 씩 편집해서 넣어봐야 겠어요.

// 쿠키 만들기
function setCookie(key,value,expire) {
   var cookieDate = new Date();
   cookieDate.setDate(cookieDate.getDate() + parseInt(expire));
   document.cookie = key + "=" + escape(value) + "; expires=" + cookieDate.toGMTString() + "; path=/";
}

// 쿠키 값 얻기
function getCookie(key) {
   var cookie = document.cookie;
   var first = cookie.indexOf(key+"=");
   if (first>=0) {
       var str = cookie.substring(first,cookie.length);
       var last = str.indexOf(";");
       if (last<0) {
           last = str.length;
       }
       str = str.substring(0,last).split("=");
       return unescape(str[1]);
   } else {
       return null;
   }
}

// 쿠키 지우기
function delCookie(key) {
   today = new Date();
   today.setDate(today.getDate() - 1);
   document.cookie = key + "=; path=/; expires=" + today.toGMTString() + ";";
}

파이어폭스3에서,
같은 도메인이라고 해도 서로 다른페이지에서 같은 이름, 같은 값의 쿠키를 생성하면
기존의 쿠키가 업데이트되는 것이 아니라 같은 이름, 같은 값의 쿠키가 여러개 생성되어 생각과는 다르게 작동하는 현상을 발견했다.
1개의 이름에 1개의 쿠키를 생성해서 true/false 혹은 0/1 등 그 값을 활용하려면 기존의 쿠키를 지우고 같은이름으로 새로운 쿠키를 만드는 방식을 이용하는 것이 좋을 듯 하다.

또한, IE6에서 쿠키를 제대로 활용할 수가 없었다.
검색하면 관련 내용을 많이 얻을 수 있다.

- 관련 내용 -
IE6에서의 개인정보보호(P3P) 구현과 쿠키 관련 문제점
IE6의 보안설정에 의한 쿠기 제한에 따른 웹서버 헤더추가

+ Recent posts