觸發多個按鍵來激發鍵盤快捷鍵jquery

Question

我想創建頁面縮放 - 根據jQuery的鍵盤快捷鍵。主要是，當用戶點擊頁面上的某個元素時，我想要觸發Ctrl與+和Ctrl與-密鑰對。我試圖從Way to trigger multiple keypress and hold events in jQuery問題這個代碼片斷，但它不工作 - 它不縮放頁面

$("#zoom").click(function() { 

    var e = $.Event("keydown"); 
    e.which = 61; // # key code for + 
    e.ctrlKey = true; 
    $(document).trigger(e); 

}); 

Answer 1

您可以使用此librarie。有很多例子

http://www.openjs.com/scripts/events/keyboard_shortcuts/

Answer 2

你的事件觸發似乎工作就好了，根據我的fiddle。

$(document).bind('keydown', function(e) { 
    e.preventDefault(); 

    var d = new Date(); 
    $('#log').html(
     'time: ' + d.getTime() + '<br/>' + 
     'key: ' + e.which + '<br/>' + 
     'ctrl: ' + (e.ctrlKey ? 'Yes' : 'No') 
    ); 
}); 

但是，你似乎在問如何控制瀏覽器的縮放級別，這是不可能在大多數（如果有的話）無需插件的瀏覽器。

您可以實現自己的使用CSS和Javascript的縮放，甚至使用上面的代碼中捕捉Ctrl +和Ctrl -但你不能阻止用戶通過其他方式縮放頁面。

CSS：

.text-zoom-0{ 
     font-size: .75em; 
    } 
    .text-zoom-1{ 
     font-size: 1em; 
    } 
    .text-zoom-2{ 
     font-size: 1.25em; 
    } 

的Javascript：

jQuery(function($) { 
    var currentZoom = 1, 
     minZoom = 0, 
     maxZoom = 2, 
     changeZoom = function(increase) { 
      var newZoom = currentZoom; 

      if (increase && currentZoom < maxZoom) { 
       newZoom++; 
       $('.text-zoom-' + currentZoom) 
        .addClass('.text-zoom-' + newZoom) 
        .removeClass('.text-zoom-' + currentZoom); 
      } else if (currentZoom > minZoom) { 
       newZoom--; 
       $('.text-zoom-' + currentZoom) 
        .addClass('.text-zoom-' + newZoom) 
        .removeClass('.text-zoom-' + currentZoom); 
      } 

      currentZoom = newZoom; 
     }; 

    $('.zoomIn').click(function(e) { 
     changeZoom(true); 
    }); 

    $('.zoomOut').click(function(e) { 
     changeZoom(false); 
    }); 
}); 

當然，你必須做的圖像，導航和頁面上的所有其他元素一樣。如果你想真正做到這一點，你可能會更加聰明關於CSS比這個小片段，但要記住，可能是不一樣的應該由任何想象的延伸......