触发多个按键以激发键盘快捷键jquery

我想创建页面缩放 – 根据jQuery的键盘快捷键。 主要是，当用户点击页面上的某个元素时，我想用+键和Ctrl键-键对触发。 我已经尝试过Way中的这个代码片段来触发jQuery问题中的多个按键和保持事件 ，但它不起作用 – 它不会缩放页面

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

Answer 1

根据我的小提琴 ，你的事件触发似乎工作得很好。

 $(document).bind('keydown', function(e) { e.preventDefault(); var d = new Date(); $('#log').html( 'time: ' + d.getTime() + '
' + 'key: ' + e.which + '
' + '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，但请记住， 可能与任何想象力都不一样……

Answer 2

你可以使用这个图书馆。 有很多例子

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