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

【问题标题】：trigger multiple keypress to stimulate keyboard shortcut jquery触发多个按键以刺激键盘快捷键jquery
【发布时间】：2012-11-18 17:13:50
【问题描述】：

我想根据 jQuery 的键盘快捷键创建页面缩放。主要是，当用户点击页面上的某个元素时，我想用+ 和Ctrl 用- 键对触发Ctrl。我已经从Way to trigger multiple keypress and hold events in jQuery question 中尝试过这段代码 sn-p，但它不起作用 - 它不会缩放页面

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

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

});

【问题讨论】：

@Kelvin Mackay 它似乎工作正常，但实际上并没有放大，就像点击 ctrl + = 一样。至少在 chrome 中

标签： javascript jquery keypress

【解决方案1】：

根据我的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 实现自己的缩放，甚至使用上面的 sn-p 来捕获 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 方面比这个小 sn-p 聪明得多，但请记住，could 与 should 不一样想象力的延伸……

【讨论】：

这个。如果一个随机的、不受信任的网站可能会扰乱您的显示设置，您能想象一下混乱吗？
是的，它可以工作，我的意思是没有错误或smth，但它不会放大我想要实现的页面
@Davo 正如我所说，控制浏览器的本机缩放是不可能的。如果您希望使用 CSS 和 Javascript，您可以实现自己的缩放功能。

【解决方案2】：

您可以使用这个库。例子很多

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

【讨论】：

他正试图做相反的事情。