공지사항
최근에 올라온 글
최근에 달린 댓글
Total
Today
Yesterday

티스토리 뷰

■ 프론트엔드 ■/JavaScript

키보드 입력 - 3가지 솔루션

serpiko 2013. 10. 13. 23:34

다만들어놓고 브라우저 호환 (특히 IE8이하 버전의호환 문제는 사람을 여러모로 피곤하게 만든다.)

 

테스트한 브라우저는 - 파이어폭스, 크롬, IE, 오페라. (아래 그림참조)

 

참고로 사파리는 너무 불안정하게 에러가 떠서 자꾸만 컴이 다운되서 탈락시킴.

 

 

해결책으로 제시할 3가지정도의 솔루션은 다음과 같다.

 

1. IE7,8제외한 모든 브라우저 가능 - addEventListener : 21번 라인으로

2. 제이쿼리를 이용한 모든 브라우저 가능 - keydown / keyup : 53번 라인으로

3. 클래식 자바스크립트로 모든 브라우저 가능 - onkeydown / onkeyup : 65번 라인으로

 

 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
 
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>key input test</title>
<style type="text/css">
 * {padding:0;margin:0;}
</style>

<script src="js/jquery-1.7.1.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript" src="js/test.js" charset="utf-8"></script>
</head>

<body>
<script>
 $(document).ready(function() {
  var RIGHT = 39;
  var LEFT = 37;
  
  /****************************************************
  * IE8,7제외 모든 브라우저 동작
  ****************************************************/
  window.addEventListener("keydown", function(event)
  {
     switch(event.keyCode)
     {
      case LEFT:
     console.log("LEFT on");
     break;  
     
      case RIGHT:
     console.log("RIGHT on");
     break; 
     }
   }, false);

   window.addEventListener("keyup", function(event)
   {
     switch(event.keyCode)
     {   
      case LEFT:
     console.log("LEFT off");
     break;  
     
      case RIGHT:
     console.log("RIGHT off");
     break; 
     }
  }, false);
  
  
  /****************************************************
  * 모든 브라우저 동작
  ****************************************************/
  /*
  $(document).keydown(function(event){
  if(event.keyCode == LEFT) console.log("key down")
  });
  $(document).keyup(function(event){
  if(event.keyCode == LEFT) console.log("key up")
  });
  */

  /****************************************************
  * 모든 브라우저 동작
  ****************************************************/
  /*
  window.document.onkeydown = function(e) {
   if(!e) {
    e = event;
   }
   if(e.keyCode == LEFT) {
    console.log("left on")
   }
   if(e.keyCode == RIGHT) {
    console.log("right on")
   }
  }

  window.document.onkeyup = function(e) {
   if(!e) {
    e = event;
   }
   if(e.keyCode == LEFT) {
    console.log("left off")
   }
   if(e.keyCode == RIGHT) {
    console.log("right off")
   }
  }*/
 });

</script>
</body>
</html>
저작자표시 비영리 변경금지

'■ 프론트엔드 ■ > JavaScript' 카테고리의 다른 글

시간함수 - new Date  (0) 2013.10.13
마우스휠 - addEventListener, onmousewheel  (0) 2013.10.13
디바이스 감지 - window.navigator.userAgent  (0) 2013.10.13
new - Class생성  (0) 2013.10.13
onload - 페이지 로딩시 바로 시작되는 함수  (0) 2013.10.13
댓글