触发多个按键以刺激键盘快捷键jquery [英] trigger multiple keypress to stimulate keyboard shortcut jquery

问题描述

我想创建页面缩放-根据jQuery的键盘快捷键.主要是，当用户单击页面上的某些元素时，我想使用+和-键对触发Ctrl和Ctrl.我已经尝试过如何触发多个按键的代码段并在jQuery问题中保留事件，但无法正常工作-无法缩放页面

I want to create page zoom - according to keyboard shortcuts by jQuery. Mainly, I want to trigger Ctrl with + and Ctrl with - key pairs, when the user clicks on some element on the page. I have tried this code snippet from Way to trigger multiple keypress and hold events in jQuery question, but it does not work - it does not zoom the page

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

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

});

推荐答案

根据我的小提琴.

$(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')
    );
});

但是，您似乎在问如何控制浏览器的缩放级别，这在大多数没有插件的浏览器中是不可能的.

However, you seem to be asking how to control the browser's zoom level, which isn't possible in most (if any) browsers without a plugin.

您可以使用CSS和Javascript实现自己的缩放，甚至可以使用上面的代码段捕获Ctrl +和Ctrl -，但是您将无法阻止用户缩放页面以其他方式.

You could implement zooming of your own using CSS and Javascript, and even use the above snippet to capture Ctrl + and Ctrl - but you wouldn't be able to prevent the user zooming the page in other ways.

CSS:

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

JavaScript:

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更加聪明，但是请记住，可能与应该在任何方面都不相同想象力...

And of course you'd have to do the same for images, navigation, and every other element on the page. If you wanted to actually do this, you could be much more clever about the CSS than this little snippet, but remember, could is not the same as should by any stretch of the imagination...

这篇关于触发多个按键以刺激键盘快捷键jquery的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！