[JQUERY] 자바 스크립트의 키 누름을 감지하는 간단한 방법

자바 스크립트의 키 누름을 감지하는 간단한 방법

해결법

1. ---

   1.일반 자바 스크립트로, 간단한이다 :

   일반 자바 스크립트로, 간단한이다 :

   document.onkeypress = function (e) {
       e = e || window.event;
       // use e.keyCode
   };
   

   그러나, 당신은 단지 이벤트에 대한 하나의 처리기를 바인딩 할 수 있습니다.

   또한, 당신은 같은 이벤트에 잠재적으로 바인드 여러 핸들러 할 수 있도록 다음 사용할 수 있습니다 :

   addEvent(document, "keypress", function (e) {
       e = e || window.event;
       // use e.keyCode
   });
   
   function addEvent(element, eventName, callback) {
       if (element.addEventListener) {
           element.addEventListener(eventName, callback, false);
       } else if (element.attachEvent) {
           element.attachEvent("on" + eventName, callback);
       } else {
           element["on" + eventName] = callback;
       }
   }
   

   두 경우 모두, 키 코드 그래서 확인하고 파악하는 것이 더있다, 브라우저에서 일치하지 않습니다. 전자 = 전자를 주목 || window.event를 - 콜백에 전달하는 대신 window.event를에 이벤트를 넣고, Internet Explorer에서 정상적인 문제입니다.

   참고 :

   jQuery로 :

   $(document).on("keypress", function (e) {
       // use e.which
   });
   

   참고:

   jQuery를이 "큰"라이브러리 것보다 기타, jQuery를 정말 특히 윈도우 이벤트와 브라우저 사이의 불일치에 도움이 ... 그리고 그 부정 할 수 없다. 잘하면 내가 당신의 예를 들어 제공하는 jQuery 코드가 훨씬 더 우아하고 짧은, 그러나 일관된 방법으로 원하는 것을 달성하는 것이 명백하다. 당신은 정확하다 (어떤 키를 눌렀는지 알고를 들어, 키 코드)가 전자 (이벤트) 및 e.which을 신뢰 할 수 있어야한다. 일반 자바 스크립트에서, 당신이 jQuery 라이브러리가 내부적으로 수행하는 것이 모든 일을하지 않는 알고 좀 더 열심히합니다.

   주 키 누름과 다른를 keyDown 이벤트가있다. 당신은 여기에 대해 자세히 알아볼 수 있습니다 : 때 onKeyPress 대를 onKeyUp에 onKeyDown에

   무엇을 사용 제안에 관해서는, 나는 확실히 당신이 프레임 워크를 학습을위한 최대 인 경우 jQuery를 사용하는 것이 좋습니다 것입니다. 동시에, 나는 당신이 자바 스크립트의 구문, 방법, 특징, 어떻게 DOM과 상호 작용하는 방법을 배워야한다고 말할 것입니다. 당신이 무슨 일이 일어나고 있는지 작동 방법을 이해하면, 당신은 jQuery로 더 쾌적한 작업해야한다. 나에게, jQuery를이 일을 더 일치하게 더 간결하다. 결국,이 자바 스크립트를, 그리고 언어를 랩합니다.

   jQuery를 매우 유용되는 또 다른 예는 AJAX와 함께입니다. jQuery를 사용하면 걱정할 필요가 없습니다 그래서 추상화 있도록 브라우저는 AJAX 요청을 처리하는 방법과 일치한다.

   여기에 힘 도움이 결정하는 것을 무언가이다 :

2. ---

   2.KEYPRESS (키 입력) 스 니펫를 눌러 Enter 키 내부를 클릭합니다.

   KEYPRESS (키 입력) 스 니펫를 눌러 Enter 키 내부를 클릭합니다.

   바닐라

   document.addEventListener ( "누르기"함수 (이벤트) { 경우 (event.keyCode == 13) { 경고 ( '안녕하세요.'); } });

   바닐라 속기 (ES6)

   this.addEventListener ( '누르기'이벤트 => { 경우 (event.keyCode == 13) { 경고 ( '안녕하세요.') } })

   jQuery를

   $ (이) CSTE 연구진 ( '키를 누를 때', 기능 (이벤트) { 경우 (event.keyCode == 13) { 경고 ( '안녕하세요.') } }) <스크립트 SRC = "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js">

   고전 jQuery를

   $ (이) .keypress (함수 (이벤트) { 경우 (event.keyCode == 13) { 경고 ( '안녕하세요.') } }) <스크립트 SRC = "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js">

   jQuery를 속기 (ES6)

   $ (이) .keypress ((E) => { 경우 (e.keyCode == 13) 경고 ( '안녕하세요.') }) <스크립트 SRC = "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js">

   비록 짧은 (ES6)

   $ (이) .keypress (E => e.which == 13? alert`hi.` : 널 (null) ) <스크립트 SRC = "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js">

   일부 요청으로 인해, 설명을 여기서는

   나는 그것을 업데이트 있도록 일들이 시간이 지남에 사용되지 해짐에 따라 나는이 대답을 다시 썼다.

   나는 문서를 준비하고 간결하게하기 위해이지만 필요하지 때 결과 내부의 창 범위에 초점이 사용된다.

   사용되지 않는 : 내가 .CODE를 추천 할 것입니다 때문에 .which 및 .keyCode 방법은 실제로 사용되지 않는 것으로 간주되지만 성능이 저를 위해 훨씬 빠르고 것만 카운트이기 때문에 나는 개인적으로 아직도 키 코드를 사용합니다. 어떤 사람들이 말하는 것처럼 jQuery를 클래식 버전의 .keypress ()는 공식적으로 사용되지 않습니다되지 그러나 그들은 더 이상 CSTE 연구진은 더 많은 기능 (라이브 상태, 다중 처리기 등)가로 ( '키를 누를 때')와 같은 바람직하다. 바닐라 버전의 '키를 누를 때'이벤트는 사용되지 않습니다. 사람들은 beforeinput 또는를 keyDown 오늘 선호한다. (참고 : 그것은 jQuery의 이벤트와 아무 상관이있다, 그들은 동일한라고하지만 다르게 실행된다.)

   모든 예제는 위에서되지 여부에 대해 어떤 거물 없습니다. 콘솔 또는 브라우저는 이런 일이 발생하면 것을 당신을 통지 할 수 있어야한다. 이 이제까지 향후 않는 경우에, 그냥 고정한다.

   Readablity : 용이성이 너무 짧게을 만들고에도 불구하고 날카로운 좋은 중 항상이 아니다. 당신이 팀에서 작업하는 경우, 당신의 코드를 읽고 설명해야합니다. 내가 jQuery를 버전 CSTE 연구진 ( '키 누름이'), 이것은가는 길 대부분의 사람들이 이해할 좋습니다.

   공연: 옵션이 있다면 난 항상 더 효과적 일 수있는 일 등의 효과를 통해 내 구문의 성능을 따라하지만, 그냥 작동해야 내가 더 빨리 더 나은 원하는 경우에만 실행합니다. 나는 그것 (대부분의 경우) 사용되지 않는 간주 경우에도 .keyCode을 선호하는 이유입니다. 그래도 당신에게 모든 걸 포기이다.

   성능 검사

3. ---

   3.더 이상 어떤 숫자 코드가 없습니다. 당신은 "Enter"를 사용할 수 있습니다, "ArrowLeft", "R", 또는 코드가 훨씬 더 읽을하게 직접 키 이름.

   더 이상 어떤 숫자 코드가 없습니다. 당신은 "Enter"를 사용할 수 있습니다, "ArrowLeft", "R", 또는 코드가 훨씬 더 읽을하게 직접 키 이름.

   document.addEventListener("keypress", function onEvent(event) {
       if (event.key === "ArrowLeft") {
           // Move Left
       }
       else if (event.key === "Enter") {
           // Open Menu...
       }
   });
   

   모질라 문서

   지원되는 브라우저

4. ---

   4.그것을 처리 할 수있는 몇 가지 방법이있다; 바닐라 자바 ​​스크립트는 아주 능숙하게 그것을 할 수 있습니다 :

   그것을 처리 할 수있는 몇 가지 방법이있다; 바닐라 자바 ​​스크립트는 아주 능숙하게 그것을 할 수 있습니다 :

   function code(e) {
       e = e || window.event;
       return(e.keyCode || e.which);
   }
   window.onload = function(){
       document.onkeypress = function(e){
           var key = code(e);
           // do something with key
       };
   };
   

   또는 그것을 처리하는 더 구조화 된 방법 :

   (function(d){
       var modern = (d.addEventListener), event = function(obj, evt, fn){
           if(modern) {
               obj.addEventListener(evt, fn, false);
           } else {
               obj.attachEvent("on" + evt, fn);
           }
       }, code = function(e){
           e = e || window.event;
           return(e.keyCode || e.which);
       }, init = function(){
           event(d, "keypress", function(e){
               var key = code(e);
               // do stuff with key here
           });
       };
       if(modern) {
           d.addEventListener("DOMContentLoaded", init, false);
       } else {
           d.attachEvent("onreadystatechange", function(){
               if(d.readyState === "complete") {
                   init();
               }
           });
       }
   })(document);
   

5. ---

   5.복잡 이상하지 않습니다.

   복잡 이상하지 않습니다.

     document.addEventListener('keydown', logKey);
       function logKey(e) {
         if (`${e.code}` == "ArrowRight") {
           //code here
         }
             if (`${e.code}` == "ArrowLeft") {
           //code here
         }
             if (`${e.code}` == "ArrowDown") {
           //code here
         }
             if (`${e.code}` == "ArrowUp") {
           //code here
         }
       }
   

from https://stackoverflow.com/questions/16089421/simplest-way-to-detect-keypresses-in-javascript by cc-by-sa and MIT license