jQuery - 当输入字段被聚焦时,带有回车键的目标按钮

Question

我有一个输入字段和一个登录按钮.我想允许用户点击"输入"键,在输入字段聚焦时单击按钮.我如何用jQuery做到这一点？

<input type="text" size="10" id="loginUserID" name="username">
<input type="button" value="Login" name="loginBtn" id="loginBtn">

Answer 1

$('#loginUserID').keypress(function(event){
  if(event.keyCode == 13){
    $('#loginBtn').click();
  }
});

演示:http://jsfiddle.net/Bhf5a/

Answer 2

你不需要jQuery,只需将按钮更改为type="submit":

<input type="text" size="10" id="loginUserID" name="username">
<input type="submit" value="Login" name="loginBtn" id="loginBtn">

然后<form>当你点击Enter文本输入时,它将自动提交.

Answer 3

如果它们处于相同的形式并且您将按钮更改为type="submit"应该发现它会自动发生,但无论如何......

$(document).ready(function() {

   $('#loginUserID').keypress(function(e){
      if(e.which === 13)
         $('#loginBtn').click();
   });

});

(或者您可能更喜欢.keyup或.keydown.)

Answer 4

接受的答案以及大多数其他答案理所当然地认为 click() 操作可能会通过提交表单并切换到另一个页面来结束事件处理，或者表单上某处没有提交，因此他们忽略了停止事件链，但情况可能并非如此。

e.preventDefault()在调用click()目标按钮之前不要忘记调用。否则，除了单击之外，表单上的第一个按钮仍会在回车时触发！

$('#loginUserID').keypress(function(event) {
    if(event.keyCode == 13) {
        e.preventDefault(); // Stop the default behaviour
        $('#loginBtn').click();
    }
});