单击事件的jQuery键盘快捷键

Question

我想在我的网站上设置一个模拟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 ++事件吗？

Answer 1

根据该主题SO：从鼠标调用keyevent，我创建了以下测试：

<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 + +进行缩放。 无法做到吗？

Answer 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>

单击事件的jQuery键盘快捷键

问题描述

2 个解决方案

解决方案1
0 2011-01-31 12:39:14

解决方案2
0 2011-02-01 08:17:00

单击事件的jQuery键盘快捷键

问题描述

2 个解决方案

解决方案1 0 2011-01-31 12:39:14

解决方案2 0 2011-02-01 08:17:00

解决方案1
0 2011-01-31 12:39:14

解决方案2
0 2011-02-01 08:17:00