且构网

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

通过javascript / jQuery检测IE中的箭头按键

更新时间:2021-10-12 22:24:53

来自 jQuery keypress 文档(最后一段)介绍性文字):

From the jQuery keypress documentation (the last paragraph of the introductory text):


注意 keydown keyup 提供一个代码,指示按下哪个键,而 keypress 表示输入了哪个字符。例如,将报告一个小写的a 65由 keydown keyup ,但由 keypress 为97 >所有事件都报告大写A为97。由于这种区别,当捕获箭头键, .keydown() .keyup()等特殊键击时,一个更好的选择。

Note that keydown and keyup provide a code indicating which key is pressed, while keypress indicates which character was entered. For example, a lowercase "a" will be reported as 65 by keydown and keyup, but as 97 by keypress. An uppercase "A" is reported as 97 by all events. Because of this distinction, when catching special keystrokes such as arrow keys, .keydown() or .keyup() is a better choice.

它甚至提到了箭头键;)因此,你真的需要挂钩 keydown keyup 事件。这是 SSCCE keydown ,只是copy'n'paste'n '运行。不,您不需要对事件进行浏览器兼容检查,这适用于从IE6到Firefox的所有浏览器。

It even literally mentions about the arrow keys ;) Thus, you really need to hook on either the keydown or keyup events. Here's an SSCCE with keydown, just copy'n'paste'n'run it. No, you don't need to do a browser-compatible check on the event, this works in all browsers from IE6 up to with Firefox.

<!doctype html>
<html lang="en">
    <head>
        <title>SO question 2217553</title>
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
        <script>
            $(document).keydown(function(event) {
                switch (event.keyCode) {
                    case 37: alert('left'); break;
                    case 38: alert('up'); break;
                    case 39: alert('right'); break;
                    case 40: alert('down'); break;
                }
            });
        </script>
    </head>
    <body>
       <p>Press one of the arrow keys.</p> 
    </body>
</html>