.keydown() 当按下 return 键时

Question

我正在尝试获取当用户按下 Return 键时触发搜索按钮的选项。目前只能在搜索按钮上按下，但有时用户有在搜索条目后按下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());
  });
});

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

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 键绑定是免费的。另外，您不必分别收听 keydown 和 click 事件。

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

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

用户在文本框中输入内容并按下 return 键
用户在文本框中输入内容并单击提交按钮

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

Answer 2

您已将 keydown 事件附加到 search-button，但我认为它已附加到 search-input

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

Answer 3

这应该有效：

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

.keydown() 当按下 return 键时

.keydown() when press return key

html

javascript

jquery

keycode