當我在表單中按下回車鍵時如何觸發另一個按鈕

Question

我有一個搜索欄，如果我輸入任何內容，它會在另一個模態中處理答案或 output。 然后，如果我單擊 [搜索] 按鈕，則會觸發模式。 現在我希望如果我在框內按下回車鍵，它將觸發按鈕。

 <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

<form class="form-inline" id="myForm">
        <input class="form-control mr-sm-1" 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>

<script type="text/javascript">
    var form = document.getElementById("myForm");
    function handleForm(event) { event.preventDefault(); } 
    form.addEventListener('submit', submit);

    function submit(event) {
        event.preventDefault()
        console.log('code here')
    }
</script>

Answer 2

嗨，您可以通過簡單的 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>

不要使用 <a> 標簽，而是使用按鈕。

現在最后將下面的 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>