触发输入键不起作用？

Question

我已经在Stackoverflow上搜索了与我所寻找的问题类似的问题。 但是，当我尝试使Enter键起作用时，我浏览的所有帖子都无法帮助我实现所要实现的目标。 我正在为FreeCodeCamp开发一个项目，代码在Codepen中。 我不知道怎么了 我只知道当我按下按钮（这是搜索图标）时它才起作用。

这是我在Codepen中的代码：

的HTML

<form>
      <input id="searchkeyword" type="text" placeholder="Search Wikipedia" />
      <i id="submitbtn" class="fa fa-search"></i>
    </form>

Java脚本

$(document).ready(function() {

  $("#submitbtn").on("click", getWord);

  $("#searchkeyword").keypress(function(e){
    if(e.which == 13){
    $("#submitbtn").on("click", getWord);
    }
  });

});

Answer 1

默认情况下， <form>的Enter键将提交表单。 如果您不希望发生这种情况，可以通过添加e.preventDefault();来防止它发生e.preventDefault();

更重要的是，您无需单击按键上的按钮，而只是重新绑定了click事件。 它必须是$("#submitbtn").click() ，且不包含on部分。

$(document).ready(function() {

  $("#submitbtn").on("click", getWord); // .on attaches an event to our button

  $("#searchkeyword").keypress(function(e){
    if(e.which == 13){
        e.preventDefault();
        $("#submitbtn").click(); // .click triggers the .on("click", ... ) event
    }
  });

});