【问题标题】:Jquery keypress event ignore arrow keysJquery按键事件忽略箭头键
【发布时间】:2013-07-22 08:27:18
【问题描述】:

我有一个类似于搜索的输入框(类似于 facebook)。 我在按键事件上使用 jquery,效果很好。 问题是我无法使用箭头键向下滚动结果集,每次按下其中一个时,搜索结果都会重新生成。 那么是否可以忽略方向键/shift/tab等呢?

http://jsfiddle.net/UU6KG/

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

谢谢

【问题讨论】:

    标签: jquery html jquery-ui


    【解决方案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();
    });
    

    Click for a list of key codes

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

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

    keypress 事件几乎在所有情况下都有效,但谨慎使用 keyupkeydown 因为某些浏览器(我认为某些旧版本的 Firefox)无法检测到某些键,例如箭头键,使用keypress 事件。

    【讨论】:

    【解决方案2】:

    我还提出,您应该忽略不应直接导致新查询的其他键。例如,shiftscroll-lockend 等键。在咨询了@theyetiman 链接的同一个keycode list 之后,我想出了这个if 语句来忽略所有不重要的键(注意将keypress 交换为keyup 以允许捕获像@987654327 这样的重要键@):

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

    【讨论】:

      【解决方案4】:
      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;
              }
          });
      }
      

      【讨论】:

      • 欢迎来到 StackOverflow!请为您的代码添加解释,以及为什么您的解决方案与其他答案相同或更好。如果没有像其他答案那样的任何解释,您的帖子可能会被否决或删除。
      猜你喜欢
      • 1970-01-01
      • 2016-10-07
      • 1970-01-01
      • 2023-03-15
      • 2013-02-04
      • 2013-10-21
      • 2015-08-14
      • 1970-01-01
      • 2014-08-10
      相关资源
      最近更新 更多