如何使用jQuery检测按键盘输入？

Question

我想检测用户是否按下了EnterjQuery.

这怎么可能？它需要插件吗？

编辑:看起来我需要使用该keypress()方法.

我想知道是否有人知道该命令是否存在浏览器问题 - 比如我是否应该了解任何浏览器兼容性问题？

Answer 1

jQuery的重点在于您不必担心浏览器差异.我很确定你可以放心地enter在所有浏览器中使用13.所以考虑到这一点,你可以这样做:

$(document).on('keypress',function(e) {
    if(e.which == 13) {
        alert('You pressed enter!');
    }
});

Answer 2

我写了一个小插件,以便更容易绑定"按下输入键"一个事件:

$.fn.enterKey = function (fnc) {
    return this.each(function () {
        $(this).keypress(function (ev) {
            var keycode = (ev.keyCode ? ev.keyCode : ev.which);
            if (keycode == '13') {
                fnc.call(this, ev);
            }
        })
    })
}

用法:

$("#input").enterKey(function () {
    alert('Enter!');
})

Answer 3

我无法将@Paolo Bergantino发布的代码用于工作,但是当我将其更改为$(document)而e.which不是e.keyCode那时我发现它无故障地工作.

$(document).keypress(function(e) {
    if(e.which == 13) {
        alert('You pressed enter!');
    }
});

链接到JS Bin上的示例

Answer 4

我发现这更兼容跨浏览器:

$(document).keypress(function(event) {
    var keycode = event.keyCode || event.which;
    if(keycode == '13') {
        alert('You pressed a "enter" key in somewhere');    
    }
});

Answer 5

您可以使用jquery'keydown'事件句柄来完成此操作

   $( "#start" ).on( "keydown", function(event) {
      if(event.which == 13) 
         alert("Entered!");
    });

Answer 6

使用event.key和现代JS!

$(document).keypress(function(event) {
    if (event.key === "Enter") {
        // Do something
    }
});

或者没有jQuery:

document.addEventListener("keypress", function onEvent(event) {
    if (event.key === "Enter") {
        // Do something better
    }
});

Mozilla文档

支持的浏览器

Answer 7

我花了一些时间来提出这个解决方案,我希望它可以帮助某人.

$(document).ready(function(){

  $('#loginforms').keypress(function(e) {
    if (e.which == 13) {
    //e.preventDefault();
    alert('login pressed');
    }
  });

 $('#signupforms').keypress(function(e) {
    if (e.which == 13) {
      //e.preventDefault();
      alert('register');
    }
  });

});

Answer 8

有一个keypress()事件方法.Enter键的ascii编号为13,不依赖于使用的浏览器.

Answer 9

Andrea上面的答案的一个小扩展使得辅助方法更有用,当您可能还想捕获修改后的输入按下(即ctrl-enter或shift-enter).例如,此变体允许绑定,如:

$('textarea').enterKey(function() {$(this).closest('form').submit(); }, 'ctrl')

当用户按下ctrl-enter时,提交一个表单,焦点在该表单的textarea上.

$.fn.enterKey = function (fnc, mod) {
    return this.each(function () {
        $(this).keypress(function (ev) {
            var keycode = (ev.keyCode ? ev.keyCode : ev.which);
            if ((keycode == '13' || keycode == '10') && (!mod || ev[mod + 'Key'])) {
                fnc.call(this, ev);
            }
        })
    })
}

(另请参阅Ctrl +在TEXTAREA中输入jQuery)