且构网

分享程序员开发的那些事...
且构网 - 分享程序员编程开发的那些事

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

更新时间:2021-11-27 16:04:59

用纯Javascript,最简单的是:

With plain Javascript, the simplest is:

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;
    }
}

在任何一种情况下,keyCode 在浏览器中都不一致,因此需要检查和找出更多内容.注意 e = e ||window.event - 这是 Internet Explorer 的正常问题,将事件放在 window.event 中,而不是将其传递给回调.

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.

参考资料:

使用 jQuery:

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

参考:

除了 jQuery 是一个大型"库之外,jQuery 确实有助于解决浏览器之间的不一致问题,尤其是窗口事件……这是不可否认的.希望很明显,我为您的示例提供的 jQuery 代码更优雅、更短,但以一致的方式完成了您想要的工作.您应该能够相信 e (事件)和 e.which (键码,用于知道按下了哪个键)是准确的.在纯 Javascript 中,除非您执行 jQuery 库内部所做的所有事情,否则很难知道.

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.

注意有一个 keydown 事件,它不同于 keypress.您可以在此处了解有关它们的更多信息:onKeyPress Vs.onKeyUp 和 onKeyDown

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

至于建议使用什么,如果您准备学习该框架,我肯定会建议使用 jQuery.同时,我想说你应该学习 Javascript 的语法、方法、特性,以及如何与 DOM 交互.一旦你理解了它是如何工作的以及发生了什么,你应该更容易使用 jQuery.对我来说,jQuery 让事情变得更加一致和简洁.最后,它是 Javascript,并包装了语言.

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 例子是 AJAX.浏览器与 AJAX 请求的处理方式不一致,因此 jQuery 抽象了这一点,因此您不必担心.

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.

以下几点可能有助于做出决定:

Here's something that might help decide: