タブ・キー・ボタン・イベントをトリガする方法は？

Question

下記の画像が表示されている場合はご覧ください。国名スタイルはマウスオーバーで変更されます。しかし、下向き矢印キーをクリックすると、同じ動作を表示する必要があります。 これを行う方法を教えてもらえますか？

Answer 1

アイデアのKeyDownイベントにバインドすることで、キーがある場合は下矢印 - あなたは、リスト内の次の選択する必要があります。現在の選択範囲のインデックスを持っていなければなりません。マウスオーバーイベントが発生した場合、現在選択されているインデックスをホバリングアイテムに変更するだけです。インデックスを使用して背景色を変更します。 ReactJsやそれに類するUIフレームワークを使うのは簡単ですが、jQueryを少し乱暴に使いますが、もしうまくいけばうまくいくでしょう。役立つはず

2のコードスニペット：

$(document).keydown(function(e) { 
    switch(e.which) { 
     case 37: // left 
     break; 

     case 38: // up 
     break; 

     case 39: // right 
     break; 

     case 40: // down 
     break; 

     default: return; // exit this handler for other keys 
    } 
    e.preventDefault(); // prevent the default action (scroll/move caret) 
}); 

$('.tg').bind('keypress', function(event) { 
    if(event.which === 13) { // tab 
    $(this).next().focus(); 
    } 
}); 

出典： - Simulate pressing tab key with jQuery - Binding arrow keys in JS/jQuery

私はReactJs https://github.com/liesislukas/react-dropdown-autocomplete-with-search