jQuery按键事件忽略箭头键

Question

我有一个输入框，类似于Facebook的搜索框。我使用jQuery中的按键事件（key-press）可以正常工作。但问题是我无法使用箭头键向下滚动结果集，每次按下其中一个键时，搜索结果都会重新生成。所以，有没有可能忽略箭头键、Shift、Tab键等？

http://jsfiddle.net/UU6KG/

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

谢谢

- Athanatos

Answer 1

您需要过滤掉方向键代码（37、38、39、40），请尝试以下方法：

注意使用function(e)替代function() - 这样可以让您获取事件以及按键代码。

$('#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();
});

点击此处查看键码列表

来自keypress/keyup/keydown文档的一条注释：

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

keypress事件在几乎所有情况下均有效，但最好使用keyup或keydown，因为某些浏览器（我认为是某些较旧版本的Firefox）无法使用keypress事件检测到某些键，例如箭头键。

- theyetiman

---

非常感谢您提供详细的答案，更新后的示例链接：http://jsfiddle.net/UU6KG/1/ - Athanatos

Answer 2

我认为您应该忽略其他不直接导致新查询的按键，例如shift、scroll-lock和end等。在查阅了与@theyetiman链接的相同的按键列表后，我得出了以下if语句来忽略所有无关紧要的按键（请注意将keypress换成keyup以允许捕获像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;
    }
});

- Matt

---

代码列表很有趣，但条件逻辑可能存在错误（我承认我复制粘贴了！）。 此外，在您的示例中，空格字符被忽略。对于其他复制粘贴者：如果他们在末尾输入，则没问题，但如果用户向左箭头并按下空格键，则数据可能会更改。 - Mayyit

Answer 3

theyetiman 的代码可以简化一下，像这样：

$('#search-form .search-terms').on('keydown', function(e){
    // do nothing if it's an arrow key
    if ([37,38,39,40].indexOf(e.keyCode || e.which) !== -1) {
        return;
    }

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

- Tyler V.

Answer 4

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

                }

- Hamed Khosravi

Answer 5

if ( !Main.IsEmptyOrNull( event ) )
{
    $( document ).keydown( function ( e )
    {
        switch ( e.which )
        {
            case 16:
            case 17:
            case 18:
            case 37:
            case 38:
            case 39:
            case 40:
                break;
            default:
                var that = event.target;
                that.rows = that.getAttribute( 'data-min-rows' ) | 0, that.rows;
                that.rows = that.scrollHeight / 16 ;
                break;
        }
    });
}

- Marcos Oliveira

---

欢迎来到StackOverflow！请为您的代码添加解释，以及为什么您的解决方案等同或优于其他答案。如果没有像其他答案那样的解释，您的帖子可能会被投票降低或删除。 - Das_Geek