点击事件的jQuery键盘快捷键答案

【问题标题】：jQuery keyboard shortcut by clickevent点击事件的jQuery键盘快捷键
【发布时间】：2011-01-29 17:19:11
【问题描述】：

我想在我的网站上有一个按钮，它可以模拟 CTRL + +（放大）。所以我需要创建 2 个按键或其他东西。我有以下触发 1 个按键：

<html>
<head>
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.4.4.min.js"></script>
    <title>Stackoverflow</title>
</head>
<body>
<script type="text/javascript">
    function simulateKeyPress(character) {
        jQuery.event.trigger({ type: 'keypress', which: character.charCodeAt(0) });
    }

    function pressCtrlPlus() {
        simulateKeyPress("=");
    }

    $(function () {
        $('body').keypress(function (e) {
            alert(e.which);
        });
    });
</script>

<input type="button" value="Ctrl +" ONCLICK="pressCtrlPlus();">

</body>
</html>

有人知道如何通过单击按钮来创建 CTRL + + 事件吗？

【问题讨论】：

可能重复：stackoverflow.com/questions/2445613/…
triggering browser Zoom-in and Zoom-out funtions 和 others 的可能重复项。发帖前请先搜索。
triggering browser Zoom-in and Zoom-out funtions 的可能副本
不幸的是，以上所有解决方案都不能解决我的问题。我需要模拟 CTRL+。这是因为当您使用 div 的缩放级别等放大页面时，页面会掉出窗口 i.o.o。使用 CTRL+ 进行缩放

标签： javascript jquery keyboard-shortcuts zooming

【解决方案1】：

根据这个话题SO: Calling keyevent from mouse 我创建了以下测试：

<html>
<head>
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.4.4.min.js"></script>
    <title>Stackoverflow</title>
</head>
<body>
<script type="text/javascript">
    function zoomin(zlevel) {
        var _body = parent.parent.document.body;

        if (jQuery.browser.msie) {
            _body.style.zoom = zlevel;              
        }
        else
        {
            if (typeof _body.style.MozTransform == "string")    
                _body.style.MozTransform = "scale(" + (zlevel) + ")";
            else if (typeof _body.style.zoom == "string")
                _body.style.zoom = (zlevel*100) + "%";              
        }
    }
</script>

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

<input type="button" value="Ctrl0" ONCLICK="zoomin(1.0);">
<input type="button" value="Ctrl+" ONCLICK="zoomin(1.15);">
<input type="button"  value="Ctrl++" ONCLICK="zoomin(1.3);">
</body>
</html>

但它仍然表现得很奇怪。我还没有看到任何解决方案，就像使用键盘快捷键 CTRL + + 进行缩放一样。不能这样做吗？

【讨论】：

【解决方案2】：

为了保持缩放功能，您需要记住当前缩放级别。

<html>
<head>
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.4.4.min.js"></script>
    <title>Stackoverflow</title>
</head>
<body>
<script type="text/javascript">
    function zoomin(zlevel) {
        zlevel = $('#zlevel').val() * zlevel;
        $('#zlevel').val(zlevel);

        var _body = parent.parent.document.body;

        if (jQuery.browser.msie) {
            _body.style.zoom = zlevel;              
        }
        else
        {
            if (typeof _body.style.MozTransform == "string")    
                _body.style.MozTransform = "scale(" + (zlevel) + ")";
            else if (typeof _body.style.zoom == "string")
                _body.style.zoom = (zlevel*100) + "%";              
        }
    }
</script>

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

<input type="button" value="Ctrl0" ONCLICK="zoomin(0.9);">
<input type="button" value="Ctrl+" ONCLICK="zoomin(1.15);">
<input type="button"  value="Ctrl++" ONCLICK="zoomin(1.3);">
<input type="hidden" value="1" id="zlevel">
</body>
</html>

【讨论】：