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 键绑定免费提供。另外，您无需单独收听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（）

3 个答案: