jQuery键盘激活按钮答案

【问题标题】：jQuery keyboard activate a buttonjQuery键盘激活按钮
【发布时间】：2012-09-21 08:53:52
【问题描述】：

这是我到目前为止得到的

http://jsfiddle.net/qEKfg/

这是两个在点击时激活的按钮，看起来像键盘键。
我正在尝试使其仅在键盘按下相关键（CTRL和D）时激活（动画）这将为我的网站添加书签产生“动画按钮”效果，因为 CTRL+D 是为页面添加书签的热键。

但我不知道如何设置它以使用 html 或 jQuery 中的键盘键
如果有人可以帮助我真的很感激

【问题讨论】：

...你为什么不把代码放在正确的窗口？
有些男人只想看着这个世界燃烧。
这是我第一次使用 jsfiddle，我不知道有一个选项可以将样式表放在不同的窗口中
这是一个简化版：fiddle

标签： javascript jquery html button keyboard

【解决方案1】：

以下内容应该适合您。但是，请注意，由于窗口失去焦点，我添加了一个计时器以在 5 秒后释放屏幕上的“按钮”，因为在特定时间失去焦点的窗口会阻止 keyup 事件触发。

$(document).ready(function() {
    var keys = [];
    $(window).on('keydown keyup', function(e) {
        if (e.type == "keydown") {
            if (e.keyCode == 17 || e.keyCode == 91) {
                $("a.a_demo_two:contains('CTRL')").addClass("active");
                keys[0] = e.keyCode;
            }
            else if (e.keyCode == 68) {
                $("a.a_demo_two:contains('D')").addClass("active");
                keys[1] = 68;
            };
            if ((keys[0] == 17 || e.keyCode == 91) && keys[1] == 68) {
                setTimeout(function() {
                    $('a.a_demo_two').removeClass("active");
                }, 5000);
            }
        }
        else {
            if (e.keyCode == 17 || e.keyCode == 91) {
                $("a.a_demo_two:contains('CTRL')").removeClass("active");
            }
            else if (e.keyCode == 68) {
                $("a.a_demo_two:contains('D')").removeClass("active");
            }
            keys = [];
        }
    });
});

DEMO

【讨论】：

将|| e.keyCode = 91（命令键）添加到您的 ctrl if 语句中以使其在 Mac 上也能正常工作。

【解决方案2】：

基本上，您只需将处理程序放在keydown 和keyup 事件上并触发您想要的任何东西。类似的东西

$('body').on('keydown', function(e) {   
   console.log(e)    
   if (e.ctrlKey) $('.a_demo_two').trigger('mousedown')
   if (e.keyCode === 100) $('.a_demo_two').trigger('mousedown')       
});

$('body').on('keyup', function(e) {
   console.log(e)    
   if (e.ctrlKey) $('.a_demo_two').trigger('mouseup')
   if (e.keyCode === 100) $('.a_demo_two').trigger('mouseup')       
});

【讨论】：