특정 키에 대한 keydown + keyup 이벤트

Question

특정 키를 누르고있을 때 배경색을 변경하려고합니다. 예를 들어 'r'키를 누르고 있으면 배경이 빨간색이어야합니다. 'r'키를 더 이상 누르지 않으면 배경이 흰색으로 기본 설정됩니다.

$(document).ready(function() { 
    $('body').keydown(function(e){ 
     if(e.keyCode == 114){ 
      $(this).css({'background':'red'}); 
     } 
     if(e.keyCode == 121){ 
      $(this).css({'background':'yellow'}); 
     } 
    }); 
    $('body').keypress(function(e){ 
     if(e.keyCode == 114){ 
      $(this).css({'background':'red'}); 
     } 
     if(e.keyCode == 121){ 
      $(this).css({'background':'yellow'}); 
     } 
    }); 
    $('body').keyup(function(e){ 
     if(e.keyCode == 114){ 
      $(this).css({'background':'white'}); 
     } 
     if(e.keyCode == 121){ 
      $(this).css({'background':'white'}); 
     } 
    }); 

}); 

문제는 각 개별 키에 대해 키 업이 특별히 작동하지 않는다는 것입니다.

$('body').keyup(function(e){ 
     $(this).css({'background':'white'}); 
    }); 

내가 제거하면 내가 알고있는의 keyup에서 조건문은 모두 그 때 나는 그것을 원한다고 어떻게 행동 할 경우 -하지만 특정 키의 keyup 사용하여 나중에 다른 일을 할 수 있어야합니다. 예를 들어, 'b'키가 놓여지면 "방금 b 키를 놓았습니다!"와 같이 화면에 무언가가 표시됩니다. 특정 키에 대한 keydown 및 keyup 이벤트를 추적하고 각기 다른 작업을 수행하려면 어떻게합니까? 나는이 일을 완전히 다른 더 좋은 방법이 있다면 ... (나는이 물건에 아주 새로운 해요) 그래서 이것은 매우 중 하나를 구성하지 알고

참고

Answer 1

LIVE DEMO

R = 82

$(document).ready(function() { 

    $('body').on('keydown keyup',function(e){ 
     var color = e.type=="keydown" ? 'red' : 'white' ; 
     if(e.which==82){ 
      $(this).css({background: color}); 
     } 
    }); 

}); 

객체 지향 예는 원하는 키에 대한 작업 목록을 작성하는 것입니다 :
LIVE DEMO

$(document).ready(function() { 

    $('body').on('keydown keyup', function(e) { 

     var key = e.which; 
     var io = e.type=="keydown" ? 0 : 1; // "0"if keydown; "1" if keyup 
     var keyAction = {     // Object to store our stuff 
// keyCode : [(0)KEYDOWN, (1)KEYUP] 
     82 : ['red' ,'white'],   // R key 
     66 : ['blue','white']    // B key (last one without comma!) 
     }; 
     var propObj = {};     // Object to store property + value for jQuery methods 
     var keyArr = keyAction[key]; 

     if(typeof keyArr != 'undefined') { // Test keyArr (82, 66) is returned/populated to prevent errors 
     propObj.background = keyAction[key][io]; // Created the jQ Method's object e.g: {background:"red"} 
     $(this).css(propObj);    // Finally create/use 
     } 

    }); 

}); 

대신 삼항 연산자 (:)의 내가 사용

:

var io = ~~(e.type=="keyup"); // evaluating false|true == 0|1 

:

이

var io = e.type=="keydown" ? 0 : 1; 

당신은 또한 같은 비트 NOT 연산자를 사용할 수 있습니다

어떤 이벤트가 발생했는지 알 필요가있는 방법 (지정된 "keydown"/ "keyup"에서) 원하는 배열 위치 [0], [1]을 얻으십시오. e.g : ["red"] ("빨간색"== 0 "화이트"== 1 임)

DEMO with NOT bitwise operator

---

an 더의 advanced way DEMO 위에서 될 ["white"] _{추가 할 귀하의 목록도}

• 대상,
01 그 방법
• 속성이 적용 23,516,
• 사용하는 jQuery를 방법,

될 것이다 : 당신은 심지어 B 키를 누른 상태에서 를 누를 수

$(document).ready(function() { 

    $('body').on('keydown keyup', function(e) { 

     var keyAction = { 

     82 : ['body', 'css', "background", ['red','white'] ], // R key 
     66 : ['body', 'css', "background", ['blue','white'] ], // B key 
     72 : ['h1', 'animate', "top", [100,30] ]  // H key 

     }, 
      key = e.which,    // Get the keyCode 
      keyArr = keyAction[key], // get our array from our list 
      io = e.type=="keydown" ? 0 : 1, // io will be 0 || 1 depending if key is down or up 
      element, 
      method, 
      property={}; // the Method Properties Object will look like e.g: {"background":"red"} 

     if(typeof keyArr != "undefined"){ 
     element = keyArr[0], 
     method = keyArr[1], 
     property[keyArr[2]] = keyArr[3][io];  
     $(element)[method](property); // do stuff 
     } 

     console.log(key, io, element, method, property); 

    }); 

}); 

H 동시 작업을 수행하는 데 필요한 키.

질문이 있으시면 언제든지 물어보십시오.

편집

당신보다 CSS 클래스를 제어하려면 같은 :

http://jsbin.com/awolab/22/edit

Answer 2

$().ready(function() { 
    $('body').on("keyup keydown", function() { 
    if(e.keyCode == 114 || e.keyCode = 121) { 
     $(this).toggleClass("key" + e.keyCode) 
    } 
    }) 
}) 

이제 당신의 CSS 클래스와 CSS 규칙과 일치