在Enter上执行搜索？

Question

我有此表格：

<form>
  <label for="locationsearch">Location:</label>
  <input type="search" id="locationsearch" name="locationsearch" />
</form>

当我点击输入（即#locations搜索）时，我想添加一个EventListener。 我尝试这样做：

const locationSearch = document.getElementById("locationsearch");
    locationSearch.addEventListener("search", () => {
      console.log("search entered");
    });

这是：

const locationSearch = document.getElementById("locationsearch");
locationSearch.onsubmit = function () {
  console.log("search entered");
};

两者都不是控制台。

执行此操作的正确/更好方法是什么？

Answer 1

OnSubmit事件将发生在表单本身上，而不是输入。因此，您可以使用表格上的ID代替将其直接定位为目标。

const locationSearch = document.getElementById("locationsearch");
locationSearch.onsubmit = function () {
  console.log("search entered");
};

<form id="locationsearch">
  <label for="locationsearch">Location:</label>
  <input type="search" name="locationsearch" />
</form>

Answer 2

您可以处理输入元素的键盘事件处理程序。如果按下输入键，请检查键代码。

const locationSearch = document.getElementById("locationsearch");
locationSearch.addEventListener("keydown", (e) => {
  if (e.code === 'Enter') {
     // Do Something ? Search
  }
});

Answer 3

您可以为此使用 按键 事件。

const locationSearch = document.getElementById("locationsearch");
    locationSearch.addEventListener("keypress", () => {
      if (event.key === "Enter") {
    event.preventDefault();
    let inputVal = document.getElementById("locationsearch").value;
    console.log("search entered "+inputVal);
    document.getElementById("locationsearch").value = "";
  }
});

<form>
  <label for="locationsearch">Location:</label>
  <input type="search" id="locationsearch" name="locationsearch" />
</form>