jQuery - 输入字段聚焦时带有输入键的目标按钮答案

【问题标题】：jQuery - Target button with enter key when input field is focusedjQuery - 输入字段聚焦时带有输入键的目标按钮
【发布时间】：2017-10-12 18:48:12
【问题描述】：

我有一个输入字段和一个登录按钮。我想让用户在输入字段集中时点击“输入”键来单击按钮。我将如何使用 jQuery 来做到这一点？

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

【问题讨论】：

标签： jquery html

【解决方案1】：

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

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

【讨论】：

更一般的方式是$(this).keypress(function(event){ ...。然后它为所有输入对象捕获ENTER 键。

【解决方案2】：

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

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

然后<form> 将在您在文本输入中按 Enter 时自行提交。

【讨论】：

如果他在按钮点击而不是表单提交上有另一个监听器怎么办？
@Alien：那么他可能会遇到问题，他必须像你一样手工解决。鉴于小 HTML sn-p，很难说出发生了什么。

【解决方案3】：

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

$(document).ready(function() {

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

});

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

【讨论】：

【解决方案4】：

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

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

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

【讨论】：

这不是问题的答案。
虽然这不是问题的答案，但它给出了其他答案，并且表明它们都是错误的（在某种程度上）。如果您不输入e.preventDefault()，您仍然会在模拟点击后获得在字段内按RETURN 的默认行为，这可能是个问题。它应该是每个答案下方的评论，或者它可以引用其他答案并添加完整的代码，但它是有用且必要的......

【解决方案5】：

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

    <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>

【讨论】：