jQuery - 当输入框获得焦点时，如何用回车键选择目标按钮

Question

我有一个输入框和一个登录按钮。我想允许用户在输入框聚焦时按下"Enter"键来点击按钮。我该如何使用jQuery实现这个功能？

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

- user547794

Answer 1

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

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

- AlienWebguy

---

更一般的方法是 $(this).keypress(function(event){ ...。这样可以捕获所有输入对象的 ENTER 键。 - Peter VARGA

Answer 2

你不需要使用jQuery来实现这个，只需要将按钮改为type="submit"即可：

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

当你在文本输入框中按下 Enter 键后，<form> 就会自动提交。

- mu is too short

---

如果他在按钮点击事件上有另一个监听器而不是表单提交，那该怎么办？ - AlienWebguy

@Alien：那么他可能会遇到问题，就像你一样不得不手动完成。由于HTML片段很小，很难确定出现了什么问题。 - mu is too short

Answer 3

如果它们在同一表单中，并且您将按钮更改为type="submit"，您应该会发现它会自动发生，但无论如何...

$(document).ready(function() {

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

});

（或者您可能更喜欢使用 .keyup 或 .keydown。）

- nnnnnn

Answer 4

接受的答案和其他大部分答案都默认click()动作可能通过提交表单并切换到另一个页面来结束事件处理，或者表单上没有递交，因此他们省略了停止事件链，但这可能不是情况。 在调用目标按钮的click()之前别忘了调用e.preventDefault()。否则，在按下回车键时，除了您的点击之外，表单上的第一个按钮仍然会触发。

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

- Piotr

---

这不是问题的答案。 - Mekanik

虽然它并不是对问题的回答，但它假设其他答案都是正确的，并表明它们都是错误的（某种程度上）。如果你不加上 e.preventDefault() ，在模拟点击后，仍会出现在字段内按下 RETURN 键的默认行为，这可能会成为一个问题。它应该作为每个答案下面的评论，或者引用其他答案并添加完整的代码，但它是有用和必要的... - FrancescoMM

Answer 5

当触发器附加在asp.net代码中而不是js或jquery中时，答案无效。设置按钮焦点可以正常工作。在您的情况下，请使用您的登录字段替换我的命名（SharePoint生成的）字段。

    <script type ="text/javascript">
    $(document).ready(function () {
        var zoekveld = $( "input[name='ctl00$m$g_02abe20b_56ca_4744_a694_5bc31dd14f49$ctl02']" );
        var loep = $( "input[name='ctl00$m$g_02abe20b_56ca_4744_a694_5bc31dd14f49$ctl04']" );
        zoekveld.keypress(function(e){
            //alert("gevonden op name");
            var key = e.which;
            if(key == 13){
                 //alert("op enter geklikt");
                  loep.focus();
             }
        });         
    });
 </script>

- Roelof Meijer