时间戳

首页 > 解决方案 > 如何获得输入键来模拟按钮按下？

javascript - 如何获得输入键来模拟按钮按下？

问题描述

我正在开发一个天气应用程序，我只希望在按下 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

)};

我认为输入键模拟按钮按下是有意义的，但我不完全确定如何做到这一点 - 不幸的是，我在网上使用的任何资源都没有帮助。

标签： javascripthtmlfrontend

解决方案

在您的侦听器中，每次发生按键时，searchBox.addEventListener("keypress", function (event) {..}您都会执行该功能。fetch由于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="
    ) 
}

推荐阅读