797

我想检测用户是否Enter使用 jQuery 按下。

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

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

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

4

19 回答 19

1450

jQuery 的全部意义在于您不必担心浏览器的差异。我很确定你可以enter在所有浏览器中安全地使用 13 岁。因此，考虑到这一点，您可以这样做：

$(document).on('keypress',function(e) {
    if(e.which == 13) {
        alert('You pressed enter!');
    }
});
于 2009-06-11T06:49:19.080 回答
136

我编写了一个小插件，以便更轻松地绑定“按下回车键”事件：

$.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!');
})
于 2012-04-01T14:00:05.623 回答
70

我无法让@Paolo Bergantino 发布的代码正常工作，但是当我将其更改为时，$(document)我e.which发现e.keyCode它可以正常工作。

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

链接到 JS Bin 上的示例

于 2011-06-21T10:45:47.163 回答
56

我发现这更能跨浏览器兼容：

$(document).keypress(function(event) {
    var keycode = event.keyCode || event.which;
    if(keycode == '13') {
        alert('You pressed a "enter" key in somewhere');    
    }
});
于 2012-03-13T19:09:54.970 回答
32

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

   $( "#start" ).on( "keydown", function(event) {
      if(event.which == 13) 
         alert("Entered!");
    });
于 2013-10-11T07:20:26.437 回答
20

使用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 文档

支持的浏览器

于 2017-09-05T21:36:32.913 回答
9

我花了一些时间想出这个解决方案，希望它对某人有所帮助。

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

});
于 2015-01-05T00:28:53.907 回答
7

有一个keypress()事件方法。Enter 键的 ascii 编号为 13，与所使用的浏览器无关。

于 2009-06-11T06:45:12.020 回答
7

当您可能还想捕获修改后的输入按下（即 ctrl-enter 或 shift-enter）时，对 Andrea 的上述答案进行了小幅扩展，使辅助方法更加有用。例如，此变体允许绑定如下：

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

当用户按下 ctrl-enter 并关注该表单的文本区域时提交表单。

$.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+Enter jQuery 在 TEXTAREA）

于 2015-01-27T02:10:38.613 回答
4

在某些情况下，您可能需要为ENTER页面的某个区域而不是页面的其他区域禁止键，例如下面包含带有搜索字段的标题的页面。 <div>

我花了一点时间才弄清楚如何做到这一点，我在这里为社区发布了这个简单而完整的示例。

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <title>Test Script</title>
  <script src="/lib/js/jquery-1.7.1.min.js" type="text/javascript"></script>
  <script type="text/javascript">
    $('.container .content input').keypress(function (event) {
      if (event.keyCode == 10 || event.keyCode == 13) {
        alert('Form Submission needs to occur using the Submit button.');
        event.preventDefault();
      }
    });
  </script>
</head>
  <body>
    <div class="container">
      <div class="header">
        <div class="FileSearch">
          <!-- Other HTML here -->
        </div>
      </div>
      <div class="content">
        <form id="testInput" action="#" method="post">
        <input type="text" name="text1" />
        <input type="text" name="text2" />
        <input type="text" name="text3" />
        <input type="submit" name="Submit" value="Submit" />
        </form>
      </div>
    </div>
  </body>
</html>

链接到 JSFiddle Playground：该[Submit]按钮不执行任何操作，但从ENTER文本框控件之一按下将不会提交表单。

于 2013-12-02T23:05:03.807 回答
4

试试这个来检测按下的 Enter 键。

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

见演示@检测键盘上的回车键按下

于 2018-03-28T12:02:42.643 回答
3

由于该keypress事件未包含在任何官方规范中，因此使用它时遇到的实际行为可能因浏览器、浏览器版本和平台而异。

$(document).keydown(function(event) {
  if (event.keyCode || event.which === 13) {
    // Cancel the default action, if needed
    event.preventDefault();
    //call function, trigger events and everything tou want to dd . ex : Trigger the button element with a click
    $("#btn").trigger('click');
  }
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<button id="btn" onclick="console.log('Button Pressed.')">&nbsp</button>

我希望它会有用！

于 2019-12-14T10:48:13.483 回答
2

我用过$(document).on("keydown")。

在某些浏览器keyCode上不受支持。与whichso 如果keyCode不支持您需要使用相同which，反之亦然。

$(document).on("keydown", function(e) {
  const ENTER_KEY_CODE = 13;
  const ENTER_KEY = "Enter";
  var code = e.keyCode || e.which
  var key = e.key
  if (code == ENTER_KEY_CODE || key == ENTER_KEY) {
    console.log("Enter key pressed")
  }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

于 2020-05-04T17:03:23.890 回答
2 
$(document).keydown(function (event) {
      //proper indentiation of keycode and which to be equal to 13.
    if ( (event.keyCode || event.which) === 13) {
        // Cancel the default action, if needed
        event.preventDefault();
        //call function, trigger events and everything tou want to dd . ex : Trigger the button element with a click
        $("#btnsearch").trigger('click');
    }
});
于 2020-08-16T08:02:01.343 回答
1 
$(document).keyup(function(e) {
    if(e.key === 'Enter') {
        //Do the stuff
    }
});
于 2019-05-07T06:15:58.760 回答
1

这就是我如何解决你应该给的return false;

 
 $(document).on('keypress',function(e) {
            if(e.which == 13) {
                $('#sub_btn').trigger('click');
                alert('You pressed a "enter" key in somewhere'); 
                return false;     
            }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form action="" method="post" id="sub_email_form">
                    <div class="modal-header">
                        <button type="button" class="close" id="close" data-dismiss="modal">&times;</button>
                        <h4 class="modal-title">Subscribe to our Technical Analysis</h4>
                    </div>
                    <div class="modal-body">
                        <p>Signup for our regular Technical Analysis updates to review recommendations delivered directly in your inbox.</p>
                        <div class="input-group">
                            <input type="email" name="sub_email" id="sub_email" class="form-control" placeholder="Enter your email" required>
                        </div>
                        <span id="save-error"></span>
                    </div>
                    <div class="modal-footer">
                        <div class="input-group-append">
                            <input type="submit" class="btn btn-primary sub_btn" id="sub_btn" name="sub_btn" value="Subscribe">
                        </div>
                    </div>
                </form>

`

于 2021-02-09T16:50:09.620 回答
0

检测用户是否按下回车的简单方法是使用键号，回车键号=13来检查设备中的键值

$("input").keypress(function (e) {
  if (e.which == 32 || (65 <= e.which && e.which <= 65 + 25)
                    || (97 <= e.which && e.which <= 97 + 25)) {
    var c = String.fromCharCode(e.which);
    $("p").append($("<span/>"))
          .children(":last")
          .append(document.createTextNode(c));
  } else if (e.which == 8) {
    // backspace in IE only be on keydown
    $("p").children(":last").remove();
  }
  $("div").text(e.which);
});

通过按 enter 键，您将获得 13 的结果。使用键值，您可以调用函数或做任何您想做的事情

        $(document).keypress(function(e) {
      if(e.which == 13) {
console.log("User entered Enter key");
          // the code you want to run 
      }
    });

如果您想在按下输入键后定位一个按钮，您可以使用代码

    $(document).bind('keypress', function(e){
  if(e.which === 13) { // return
     $('#butonname').trigger('click');
  }
});

希望有帮助

于 2013-04-17T11:17:35.857 回答
0

我认为最简单的方法是使用vanilla javacript：

document.onkeyup = function(event) {
   if (event.key === 13){
     alert("enter was pressed");
   }
}
于 2016-11-30T22:03:26.010 回答
0 
$(function(){
  $('.modal-content').keypress(function(e){
    debugger
     var id = this.children[2].children[0].id;
       if(e.which == 13) {
         e.preventDefault();
         $("#"+id).click();
       }
   })
});
于 2019-01-31T14:23:47.753 回答