web-dev-qa-db-ja.com

特定のキーのキーダウン+キーアップイベント

特定のキーを押したときに背景色を変更しようとしています。たとえば、「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'});
    });

キーアップからif条件を完全に削除すると、希望どおりに動作することはわかっていますが、後で特定のキーでキーアップを使用してさまざまなことを実行できるようにしたいと考えています。たとえば、「b」キーだけを離すと、画面に「bキーを離しました！」のように表示される場合があります。特定のキーのキーダウンイベントとキーアップイベントを追跡し、それぞれに異なることを発生させるにはどうすればよいですか？私はこれもあまり組織化されていないことを知っています（私はこのようなものにかなり慣れていません）ので、これを行うための完全に異なるより良い方法がある場合...

javascriptjquerykeypresskeydownkeyup
11
user1115666

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});  
      }
    });

});

オブジェクト指向の例は、目的のKEYのアクションのリストを作成することです。
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=="keydown" ? 0 : 1;

次のようなNOTビット演算子を使用することもできます。

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

どの方法でも（指定された「キーダウン」/「キーアップ」から）どのイベントが発生しているかを知り、目的の配列位置を取得する必要があります[0]、[1]必要なプロパティ値の例：["red"]、["white"] （ここで、「赤」== 0および「白」== 1）

NOTビット演算子を使用したデモ

もっと advanced way DEMO 上記のうち、リストに追加することもできます

  • ターゲットとする要素、
  • 使用するjQueryメソッド、
  • 適用するそのメソッドのプロパティ

その結果、次のようになります。

$(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);

    });

});

あなたもあなたの B キーを押して、 H 同時アクションを実行するためのキー。

ご不明な点がございましたら（お気軽にお問い合わせください）。

[〜＃〜]編集[〜＃〜]

CSSクラスを制御したい場合：

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

15
Roko C. Buljan