在javascript中检测按键的最简单方法-Simplestwaytodetectkeypressesinjavascript

60  

With plain Javascript, the simplest is:

使用普通的Javascript，最简单的是：

document.Onkeypress= function (e) {
    e = e || window.event;
    // use e.keyCode
};

But with this, you can only bind one handler for the event.

但有了这个，你只能为事件绑定一个处理程序。

In addition, you could use the following to be able to potentially bind multiple handlers to the same event:

此外，您可以使用以下命令将多个处理程序绑定到同一事件：

addEvent(document, "keypress", function (e) {
    e = e || window.event;
    // use e.keyCode
});

function addEvent(element, eventName, callback) {
    if (element.addEventListener) {
        element.addEventListener(eventName, callback, false);
    } else if (element.attachEvent) {
        element.attachEvent("on" + eventName, callback);
    } else {
        element["on" + eventName] = callback;
    }
}

In either case, keyCode isn't consistent across browsers, so there's more to check for and figure out. Notice the e = e || window.event - that's a normal problem with Internet Explorer, putting the event in window.event instead of passing it to the callback.

在任何一种情况下，keyCode在浏览器中都不一致，因此需要检查并弄清楚。请注意e = e || window.event - 这是Internet Explorer的常见问题，将事件放在window.event中，而不是将其传递给回调。

References:

参考文献：

• https://developer.mozilla.org/en-US/docs/DOM/Mozilla_event_reference/keypress
• https://developer.mozilla.org/en-US/docs/DOM/Mozilla_event_reference/keypress
• https://developer.mozilla.org/en-US/docs/DOM/EventTarget.addEventListener
• https://developer.mozilla.org/en-US/docs/DOM/EventTarget.addEventListener

With jQuery:

使用jQuery：

$(document).on("keypress", function (e) {
    // use e.which
});

Reference:

参考：

• http://api.jquery.com/on/
• http://api.jquery.com/on/

Other than jQuery being a "large" library, jQuery really helps with inconsistencies between browsers, especially with window events...and that can't be denied. Hopefully it's obvious that the jQuery code I provided for your example is much more elegant and shorter, yet accomplishes what you want in a consistent way. You should be able to trust that e (the event) and e.which (the key code, for knowing which key was pressed) are accurate. In plain Javascript, it's a little harder to know unless you do everything that the jQuery library internally does.

除了jQuery是一个“大”库，jQuery确实有助于浏览器之间的不一致，尤其是窗口事件...而且不能被拒绝。希望显而易见的是，我为您的示例提供的jQuery代码更优雅，更短，但以一致的方式完成您想要的任务。你应该能够相信e（事件）和e.which（关键代码，知道哪个键被按下）是准确的。在普通的Javascript中，除非你做jQuery库内部所做的一切，否则它有点难以理解。

Note there is a keydown event, that is different than keypress. You can learn more about them here: onKeyPress Vs. onKeyUp and onKeyDown

请注意，有一个keydown事件，与keypress不同。你可以在这里了解更多关于他们的信息：onKeyPress Vs. onKeyUp和onKeyDown

As for suggesting what to use, I would definitely suggest using jQuery if you're up for learning the framework. At the same time, I would say that you should learn Javascript's syntax, methods, features, and how to interact with the DOM. Once you understand how it works and what's happening, you should be more comfortable working with jQuery. To me, jQuery makes things more consistent and is more concise. In the end, it's Javascript, and wraps the language.

至于建议使用什么，我肯定会建议你使用jQuery，如果你正在学习框架。同时，我会说你应该学习Javascript的语法，方法，功能以及如何与DOM交互。一旦你理解它是如何工作的以及发生了什么，你应该更习惯使用jQuery。对我来说，jQuery使事情更加一致，更简洁。最后，它是Javascript，并包装语言。

Another example of jQuery being very useful is with AJAX. Browsers are inconsistent with how AJAX requests are handled, so jQuery abstracts that so you don't have to worry.

另一个jQuery非常有用的例子是AJAX。浏览器与AJAX请求的处理方式不一致，因此jQuery提取了这些内容，因此您不必担心。

Here's something that might help decide:

这可能有助于决定：

• http://www.jscripters.com/jquery-disadvantages-and-advantages/
• http://www.jscripters.com/jquery-disadvantages-and-advantages/

11  

KEYPRESS
(enter key)

KEYPRESS（输入密钥）

Vanilla:

香草：

document.addEventListener("keypress", function(event) {
    if (event.keyCode == 13) {
        alert('hi.')
    }
})

Vanilla shorthand:

香草速记：

this.addEventListener('keypress', (event) => {
    if (event.keyCode == 13) {
        alert('hi.')
    }
})

jQuery:

jQuery的：

$(this).on('keypress', function(event) {
    if (event.keyCode == 13) {
        alert('hi.')
    }
})

jQuery classical:

jQuery经典：

$(this).keypress(function(event) {
    if (event.keyCode == 13) {
        alert('hi.')
    }
})

jQuery shorthand:

jQuery简写：

$(this).keypress((e) => {
    if (e.which == 13) {
        alert('hi.')
    }
})

Even shorter:

更短：

$(this).keypress(e=>
    e.which==13?
    alert('hi.'):null
)

demo

演示

6  

There are a few ways to handle that; Vanilla Javascript can do it quite nicely:

有几种方法可以解决这个问题; Vanilla Javascript可以很好地完成它：

function code(e) {
    e = e || window.event;
    return(e.keyCode || e.which);
}
window.Onload= function(){
    document.Onkeypress= function(e){
        var key = code(e);
        // do something with key
    };
};

Or a more structured way of handling it:

或者更有条理的处理方式：

(function(d){
    var modern = (d.addEventListener), event = function(obj, evt, fn){
        if(modern) {
            obj.addEventListener(evt, fn, false);
        } else {
            obj.attachEvent("on" + evt, fn);
        }
    }, code = function(e){
        e = e || window.event;
        return(e.keyCode || e.which);
    }, init = function(){
        event(d, "keypress", function(e){
            var key = code(e);
            // do stuff with key here
        });
    };
    if(modern) {
        d.addEventListener("DOMContentLoaded", init, false);
    } else {
        d.attachEvent("onreadystatechange", function(){
            if(d.readyState === "complete") {
                init();
            }
        });
    }
})(document);

3  

No number codes anymore. You can use "Enter", "ArrowLeft", "r", or any key name directly, making your code far more readable.

没有数字代码了。您可以直接使用“Enter”，“ArrowLeft”，“r”或任何键名，使您的代码更具可读性。

document.addEventListener("keypress", function onEvent(event) {
    if (event.key === "ArrowLeft") {
        // Move Left
    }
    else if (event.key === "Enter") {
        // Open Menu...
    }
});

Mozilla Docs

Mozilla文档

Supported Browsers

支持的浏览器