如何創建監聽按鍵組合的事件監聽器（ctrl和左/右箭頭）？

Question

我有以下代碼，使用左右箭頭鍵在元素之間導航。

$(document).keydown(function (event) { 

    if (event.keyCode === 37) { 
     console.log("left") 
     currentPosition > 0 ? currentPosition-- : maxFocusablePosition; 
    } 

    if (event.keyCode === 39) { 
     console.log("right") 
     currentPosition < maxFocusablePosition ? currentPosition++ : 0; 
    } 

我試圖實現以下，但它不工作：

if (event.ctrlKey && (event.which === 37)) { 
    console.log("Combo Move"); 
} 

Answer 1

使用鍵代碼如下，並在函數中使用。

$(document).keydown(function (event) { 

    var keyCode = event.keyCode || event.which; 

    if (keyCode === 37) { 
     console.log("left") 
     currentPosition > 0 ? currentPosition-- : maxFocusablePosition; 
    } 

    if (keyCode === 39) { 
     console.log("right") 
     currentPosition < maxFocusablePosition ? currentPosition++ : 0; 
    } 

    if (event.ctrlKey && (keyCode === 37)) { 
     console.log("Combo Move"); 
    } 

Answer 2

真的嗎？我很驚訝，因爲ctrlKey和which適合我！

鍵盤事件API is a disgrace。關於鍵盤事件的標準化，W3C一直拖延了很長時間。這就是爲什麼你可能會看到很多衝突的信息。

$(function() { 
 
    var input = $('input'); 
 
    input.on('keydown', function(event) { 
 
    if (event.which === 37 && event.ctrlKey) { 
 
     input.val('ctrl-left'); 
 
    } else if (event.which === 39 && event.ctrlKey) { 
 
     input.val('ctrl-right'); 
 
    } else { 
 
     input.val(''); 
 
    } 
 
    }); 
 
    input.focus(); 
 
});

input { width: 100%; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<input placeholder="Press Ctrl-left or Ctrl-right in here">