javascript - 当我在表单中按下回车键时如何触发另一个按钮

Question

我有一个搜索栏，如果我在其中输入任何内容，它会处理答案或另一个模式中的输出。然后，如果我单击 [search] 按钮，则模态触发。现在我希望如果我在框内按下 enter，它会触发按钮。

 <form class="form-inline" >
        <input class="form-control mr-sm-1" onkeyup="SearchFunction()" id="searchinputfeild" 
type="search" placeholder="" aria-label="Search">

        <a class="btn btn-outline-success my-2 my-sm-0" id="searchbutton" data-toggle="modal" data- 
target="#resultsModal">Search</a>
      </form>

我在 JavaScript 方面非常非常弱。请给我一些建议，告诉我如何让它成为可能。

Answer 1

您好，您可以通过简单的 JavaScript 代码做到这一点:

您的 HTML(一些更改):

<form class="form-inline" >
    <input class="form-control mr-sm-1" id="searchinputfeild" type="search" placeholder="" aria-label="Search">

    <button class="btn btn-outline-success my-2 my-sm-0" id="searchbutton" data-toggle="modal" data-target="#resultsModal">Search</button>
</form>

Don't use < a > tag, instead use button.

现在最后将以下 JavaScript 代码放在您的正文(或任何地方)中:

<script>
 var input = document.getElementById("searchinputfeild");
 input.addEventListener("keyup", function (event) {
  if (event.keyCode === 13) {
   event.preventDefault();
   document.getElementById("searchbutton").click();
   }
 });
</script>

大功告成。

---

它会顺利工作👍

---

---

如果您想测试，请通过运行警报测试代码段在下面检查它:

var input = document.getElementById("searchinputfeild");
    input.addEventListener("keyup", function (event) {
     if (event.keyCode === 13) {
      event.preventDefault();
      document.getElementById("searchbutton").click();
      }
   });

<form class="form-inline" >
         <input class="form-control mr-sm-1" id="searchinputfeild" type="search" placeholder="" aria-label="Search">

        <button onclick="javascript:alert('Hey Congrats! I am working.')" class="btn btn-outline-success my-2 my-sm-0" id="searchbutton" data-toggle="modal" data-target="#resultsModal">Search</button>
</form>