Jquery按键事件忽略箭头键

I have an input box that acts like a search (similar to facebook). I am using the jquery on key-press event which works fine. The problem is that I can't scroll down on the set of the results using the arrow keys, every time that one of them is pressed the search results are being regenerated. So is it possible to ignore the arrow keys / shift / tab etc.

我有一个输入框,就像一个搜索(类似于Facebook)。我在按键事件上使用jquery工作正常。问题是我无法使用箭头键向下滚动结果集,每次按下其中一个结果时,搜索结果将被重新生成。那么可以忽略箭头键/ shift / tab等。

http://jsfiddle.net/UU6KG/

$("#search-form .search-terms").on("keypress", function(){
       $("#search-items #autocom").fadeIn();
    });

Thanks

3 个解决方案

#1

You need to filter out the arrow key codes (37,38,39,40), try this:

您需要过滤掉箭头键代码(37,38,39,40),试试这个:

Note the function(e) in place of function() - this allows you to grab the event and therefore the key code.

注意函数(e)代替函数() - 这使您可以获取事件,从而获取密钥代码。

$('#search-form .search-terms').on('keydown', function(e){
    // get keycode of current keypress event
    var code = (e.keyCode || e.which);

    // do nothing if it's an arrow key
    if(code == 37 || code == 38 || code == 39 || code == 40) {
        return;
    }

    // do normal behaviour for any other key
    $('#search-items #autocom').fadeIn();
});

Click for a list of key codes

单击以获取密钥代码列表

A note from the docs on keypress/keyup/keydown:

来自keypress / keyup / keydown上的文档的注释:

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 65 by all events. Because of this distinction, when catching special keystrokes such as arrow keys, .keydown() or .keyup() is a better choice.

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

The keypress event works in almost all situations but it's prudent to use keyup or keydown because some browsers (I think some older version of Firefox) don't detect certain keys, such as arrow keys, using the keypress event.

keypress事件几乎适用于所有情况,但使用keyup或keydown是谨慎的,因为某些浏览器(我认为某些旧版本的Firefox)没有使用keypress事件检测某些键,例如箭头键。

#2

I would also submit that you should be ignoring other keys that should not directly result in a new query. Keys like shift, scroll-lock, and end, for example. After consulting the same keycode list that @theyetiman linked to, I came up with this if statement to ignore all keys that shouldn't matter (note the swap of keypress for keyup to allow capture of important keys like backspace):

我还要提出,您应该忽略不应直接导致新查询的其他键。例如,移位,滚动锁定和结束等键。在查阅@theyetiman链接到的相同键码列表之后,我想出了这个if语句来忽略所有无关紧要的键(注意keyup的keypress交换以允许捕获像backspace这样的重要键):

$('.search-terms').on('keyup', function(ev) {
    if ((ev.keyCode > = 9 && ev.keyCode <= 45) || (ev.keyCode >= 91 || ev.keyCode <= 93) || (ev.keyCode >= 112 || ev.keyCode <= 145)) {
        return;
    }
});

#3

$(".search-terms").live('keydown',function(event){                  
if(event.which>=37 && event.which<=40)
                {
                    reutrn;

                }

#1