如何獲得輸入鍵來模擬按鈕按下？

Question

我正在開發一個天氣應用程序，我只希望在按下 Enter 鍵或用戶單擊提交時執行代碼。 問題是，只要按下任何鍵，代碼就會執行，我不知道為什么？ 這通常沒什么大不了的，但它每次都請求 API 而我每分鍾只收到 60 個請求，所以在那段時間里有兩三個搜索會達到這個限制。

let button = document.querySelector("#button");
let searchBox = document.querySelector("#search-box");
let city = document.querySelector(".city");
let feelsLike = document.querySelector(".feels-like");
let temperature = document.querySelector(".temp");
let weatherDescription = document.querySelector(".weather");
let windSpeed = document.querySelector(".wind");
let icons = document.querySelector(".icons");
searchBox.addEventListener("keypress", function (event) {
  if (event.key === "Enter") {
    document.getElementById("button").click();
  }
  fetch(
    "https://api.openweathermap.org/data/2.5/weather?q=" +
      searchBox.value +
      "&units=metric&appid="
  )

...Rest of code to be executed

)};

我認為輸入鍵模擬按鈕按下是有意義的，但我不完全確定如何做到這一點 - 不幸的是，我在網上使用的任何資源都沒有幫助。

Answer 1

在您的偵聽searchBox.addEventListener("keypress", function (event) {..}中，您正在執行fetch function 每次按鍵發生時。因為if -condition 不會包含您的fetch執行。

嘗試這個：

if (event.key === "Enter") {
    document.getElementById("button").click();
  
    fetch(
      "https://api.openweathermap.org/data/2.5/weather?q=" +
      searchBox.value +
      "&units=metric&appid="
    ) 
}

Answer 2

您應該將（獲取）邏輯放在按鈕的單擊處理程序中。

其他幾點：

• 如果您在從fetch獲得響應后需要執行代碼，則將該代碼放入鏈式then回調中。 請注意， fetch返回的 promise 會解析為響應 object，並且您需要調用其中一個方法來獲取另一個 promise，這反過來將解析為實際數據。
• 不要調用.click() 。 最好將目標代碼放在名為 function 中，然后在此處和按鈕的單擊處理程序中調用 function。
• 您已經有了按鈕的變量，因此無需再次調用getElemebtById 。

function process() {
  fetch(
    "https://api.openweathermap.org/data/2.5/weather?q=" +
      searchBox.value +
      "&units=metric&appid="
  ).then(function (response) {
     return response.json(); // <-- maybe? or .text() ?
  }).then(function (data) {
     //...Rest of code to be executed
  });
});

button.addEventListener("click", process);

searchBox.addEventListener("keypress", function (event) {
  if (event.key === "Enter") process();
)};

Answer 3

正如 Amacado 所說，獲取在 if 之外。

此外，如果搜索框實際上是一個 HTML <input type="search">元素，那么已經有一個 OnSearch 事件處理程序，它考慮了回車鍵和手機鍵盤中的放大鏡圖標（搜索事件）。