按键触发的操作

Question

按键触发的操作

5

我正在设计一个基于网络的会计软件。例如，当用户按下N键时，我希望打开“新会计文档”。当他/她按下S键时，打开“设置”。

我看过一些基于JavaScript和jQuery的脚本，但它们并没有完全起作用。请问有人可以帮助我吗？

我已经尝试了这个脚本：

var code = (e.keyCode ? e.keyCode : e.which);
if(code == 13) { //Enter keycode
   //Do something
}

- Mohammad Saberi

你能否发布代码？这将有助于回答问题。 - Sandeep G B

无论何时用户按下N键，我不确定“会计凭证”对您来说意味着什么，但我期望用户输入帐户名称和其他非数字信息的字段，所以当他们想在其帐户名称中添加“N”或“S”时会发生什么？ - nnnnnn

1

刚看到你发的代码更新 - 它有什么问题吗？注释里明确写着它试图捕捉回车键。看看这个按键字符表：http://www.cambiaresearch.com/articles/15/javascript-char-codes-key-codes - nnnnnn

4个回答

3

你可以使用 jQuery 的 .keypress() 或 .keyup() 方法来检测按键操作，下面是一个快速示例：

$(document).keyup(function(event) { // the event variable contains the key pressed
 if(event.which == 78) { // N keycode
   //Do something
 }
});

这是一个关于按键代码的列表：http://www.cambiaresearch.com/articles/15/javascript-char-codes-key-codes 更新1： .keyup和.keydown有不同的影响-根据@ThomasClayson-的评论：如果按住键，则keypress将重复。如果插入每个字符，它会为其注册一个事件。它也不会注册修改键，如shift（虽然在这里不必要，但这可能是值得记住的事情）。

更新2：这是来自jQuery keyup文档站点的内容：

要确定按下了哪个键，请检查传递给处理程序函数的事件对象。尽管浏览器使用不同的属性存储此信息，但jQuery规范化了.which属性，因此您可以可靠地使用它来检索键代码。此代码对应于键盘上的键，包括箭头键的代码。

有效地意味着which.event就足以确定使用了哪个键。感谢@nnnnnn

- Manse

keyup 是最好的选择，因为如果按键被按住，keypress 会重复触发。它为每个插入的字符注册一个事件。它也不会注册修饰键，比如 shift（虽然在这里不是必要的，但可能需要记住）。 - Thomas Clayson

@ThomasClayson 谢谢 - 我已经更新了我的答案...我总是在学习中... - Manse

如果您正在使用jQuery，可以放心地假设event.which存在 - jQuery为您规范化了它。 - nnnnnn

@nnnnnn 谢谢 - 我甚至没有问问题，但我在这里学到了两件事...谢谢.... :-) - Manse

@ManseUK，jQuery不仅仅是表面上看到的那样。 - david

2

您需要了解事件对象的.keyCode()属性。您可以查询该属性以发现按下了哪个键并相应地采取行动。我还建议您将修改键添加到您的快捷方式中，例如Shift或Alt，这样当有人在输入框中无意地输入时，面板不会弹出。在下面的示例中，我使用了Shift。

$(document).keyup(function(e) {
    if (e.shiftKey) {
        switch(e.keyCode ? e.keyCode : e.which) {
            case 78: // N pressed
                myNPressedHandler();
                break;
            case 83: // S pressed
                mySPressedHandler();
                break;
        }
    }
}

- Rory McCrossan

1

再次抱歉，我太过苛刻了...lol。 Keypress不是一个好事件来检查，因为如果用户按住相应的键，则会重复触发。最好检查的事件是“keyup”，因为这是确定性的“我已经按下了键，并完成按键”的事件。而且像你所建议的那样，keypress不能注册shift和alt键。 http://api.jquery.com/keypress/ - Thomas Clayson

@Thomas 哈哈 - 对我来说，现在是周一早上，我的手比我的大脑更快地工作着。 - Rory McCrossan

没问题 :) 你的回答非常好，我并不是要显摆自己聪明。只是想分享我所犯过的错误和积累的知识。 :p - Thomas Clayson

谢谢，作为我今天早上愚蠢的例子，我写了“手比我的手指打字更快”，我想说的是“比我的大脑更快”。好了，我要离开一会儿哈哈 :) - Rory McCrossan

0

$(document).bind('keypress', function(e) {
    var keycode= (e.keyCode ? e.keyCode : e.which);
       if(keyCode==78) {
      // "n"
    }else if(keyCode==83) {
      // "s"
    }

});

- erimerturk

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Thomas Clayson · Accepted Answer

$(document).bind('keyup', function(e){
    if(e.which==78) {
      // "n"
    }
    if(e.which==83) {
      // "s"
    }
});

为了防止输入框被聚焦：

$("body").on("focus",":input", function(){ $(document).unbind('keyup'); });
$("body").on("blur",":input", function(){ $(document).bind('keyup', function(e){ etc.... });

您可能希望将 bind 函数放在自己的函数中，以避免重复代码。例如：

function bindKeyup(){
    $(document).bind('keyup', function(e){
      if(e.which==78) {
        // "n"
      }
      if(e.which==83) {
        // "s"
      }
    });
}
$("body").on("focus",":input", function(){ $(document).unbind('keyup'); });
$("body").on("blur",":input", function(){ bindKeyup(); });