如何使回車鍵單擊搜索按鈕

Question

如何讓回車鍵按下搜索按鈕？ 提前致謝。

 function search(query) { if (query.slice(0, 7) == "http://") { // window.location.href = query window.open(query, '_blank'); } else { // window.location.href = "https://www.google.com/search?q=" + query debugger; window.open("https://www.google.com/search?q=" + query, '_blank'); } }

 <link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"> <div class="box"> <div class="container-1"> <input type="search" id="search" placeholder="Search..." /> <div class="icon" onclick="search(document.getElementById('search').value)"><i class="fa fa-search"></i></div> </div> </div>

Answer 1

這是一個例子：

// Get the input field
var input = document.getElementById("myInput");

// Execute a function when the user releases a key on the keyboard
input.addEventListener("keyup", function(event) {
  // Number 13 is the "Enter" key on the keyboard
  if (event.keyCode === 13) {
    // Cancel the default action, if needed
    event.preventDefault();
    // Trigger the button element with a click
    document.getElementById("myBtn").click();
  }
});

那應該回答你的問題。

Answer 2

實際上，它可以簡單地通過使用表單並按名稱檢索輸入來完成。

請注意，我們甚至可以刪除按鈕<input type="submit"> ，我們仍然可以使用ENTER鍵。

我留下了最簡單的邏輯：

 function search(query){ query.preventDefault(); let vquery = query.target.elements["search"].value; console.log(vquery) } something.addEventListener("submit", search, false)

 <div class="box"> <div class="container-1"> <form id="something"> <input name="search" placeholder="Search... type ENTER to submit or use the button -->"> <input type="submit"> </form> <div class="icon" ></div> </div> </div>