キーボードショートカットを使用してdivとやりとりする方法は？

Question

divを操作するためにキーボードショートカットを使用できますか高齢者向けのプロジェクトを開発中とはマウスと対話しません、divsをクリックしてコンテンツを開くにはキーボードショートカットを使用できますか？

キーを押している限り、イベントtriggerの使用方法はありますか？

keydown = ctrl+g 

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 
<div class="container"> 
 
<div class="row"> 
 
    <div class="col-md-3 col-sm-3 alert alert-danger"><a href="">Open ctrl+g or click</a></div> 
 
    <div class="col-md-3 col-sm-3 alert alert-warning"><a href="">Open ctrl+d or click</a></div> 
 
    <div class="col-md-3 col-sm-3 alert alert-success"><a href="">Open ctrl+e or click</a></div> 
 
    <div class="col-md-3 col-sm-3 alert alert-info"><a href="">Open ctrl+i or click</a></div> 
 
</div> 
 
</div>

この影響ブラウザのショートカットできますか？グーグル・クロムから

例ctrl+g影響は、ブラウザ

またはアクセシビリティ使用の別の形態があるのコンソールを検索するオープンリンクを開けませんか？

Answer 1

あなたは単にkeyupイベントを使用して、必要なショートカットを聞くことができます。

$("#div").keyup(function(e){ 
    if(e.ctrlKey && e.key == 'g') { //could be anything 13 for example 
    alert("this is test"); 
}); 

注私はあなたが全体のページに追加したい場合は、$(document)

Answer 2

あなたはkeyupイベントを使用することができますブラウザのキーボードショートカットに干渉については

$(function() { 
    $(document).on('keyup', function(e) { 
    if (e.ctrlKey && e.key == 'g') { 
     e.preventDefault(); 
     var $output = $('<span/>').text('You typed ctrl+g.'); 
     $('body').append($output).append('<br/>'); 
    } 
    }); 
}); 

- いくつかのケースで可能です。その周りにあなたのショートカットをデザインすることができます（Ctrl+Shiftなど）。

ご使用の場合はif (e.ctrlKey && e.key == 'g') {...}のコードを置き換えて、適切な<div>を選択して展開してください。