javascript - .keydown() 当按下回车键时

Question

我正在尝试获取当用户按下 Return 键时触发搜索按钮的选项。目前只能在搜索按钮上按下，但有时用户有在搜索条目后按下返回键的倾向。

$(document).ready(function() {
  $('#search-button').keydown(function(event){
    if (event.keyCode==13) {
       Trackster.searchTracksByTitle($("#search-input").val());
    }
  });
  $("#search-button").click(function(){
    Trackster.searchTracksByTitle($("#search-input").val());
  });
});

有谁知道我在这里做错了什么？我仍然无法使用按回车来触发搜索。

Answer 1

如果您有一个搜索输入和一个搜索按钮，理想的做法是将它们包裹在 form 标记中。

<form id="search-form">
  <input type="text" id="search-input" ...>
  <button type="submit" id="search-button" ...>Search</button>
</form>

请注意，type 设置为 submit。它使按钮充当表单的提交按钮。现在您必须监听表单的 submit 事件。 return 键绑定(bind)是免费的。另外，您不必分别收听 keydown 和 click 事件。

$(document).ready(function() {
  $('#search-form').submit(function(event) {
    event.preventDefault();
    Trackster.searchTracksByTitle($("#search-input").val());
  })
});

您将看到搜索在以下情况下有效:

1. 用户在文本框中输入内容并按下返回键
2. 用户在文本框中输入内容并点击提交按钮

我相信这可以解决您的问题。