Question

添加聚焦功能并在模糊时删除它

2022-04-05

786

javascript dom dom-events

我试图设置一个简单的脚本，每当你聚焦于一个输入并按下 Enter 键时，就会发生一些事情。就像网页和论坛上的搜索框一样。

问题是我无法让函数在用户点击不同位置后停止。我尝试添加模糊，但没有帮助，我得到了一个

"Uncaught ReferenceError: pressEnter is not defined at HTMLInputElement."

还尝试将函数设置为单独的函数并稍后在事件侦听器中调用它，但我无法传递事件参数以使该函数工作（我刚开始研究 EventListeners，所以请对我宽容一点）

如果您能帮助我正确引用 pressEnter 函数或任何其他解决方案，我将不胜感激。

inputTest = document.querySelector("#test")


inputTest.addEventListener("focus", function pressEnter() {


    window.addEventListener("keyup", (e) => {
        if (e.key === "Enter") {
            console.log("Pressed")
        }
    })
})

inputTest.addEventListener("blur", () => {

    window.removeEventListener("keyup", pressEnter())
    console.log("Done(?)")

}
)

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Events</title>
</head>

<body>
    <input type="text" id="test">

    <script src="script.js"></script>
</body>

</html>

Answer 1

您不需要如此复杂的“架构”来实现该功能，您只需将 keyup 事件监听器直接添加到 input 元素，如下所示：

const inputTest = document.querySelector("#test")

inputTest.addEventListener("keyup", (e) => {
    if (e.key === "Enter") {
        console.log("Pressed")
    }
});

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Events</title>
</head>

<body>
    <input type="text" id="test">

    <script src="script.js"></script>
</body>

</html>

Answer 2

根据您要执行的操作，您可以用表单标签替换事件侦听器。如果您尝试实现搜索栏之类的功能，这在语义上可能是正确的。看看这是否适合您：

const handleSubmit = () => {
  const input = document.querySelector("#test");
  const inputValue = input.value;

  console.log(inputValue);

  // You can handle any logic here

  return false;
};

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Events</title>
  </head>

  <body>
    <form name="eventForm" onsubmit="handleSubmit()" action="#">
      <input type="text" id="test" />
    </form>

    <script src="script.js"></script>
  </body>
</html>

Answer 3

网页和论坛上的搜索框只需检测当前 DOM 上的键盘按下即可。如下所示。

// EnterkeyListener
  document.addEventListener('keyup' , function(e){

  if (e.key == "Enter") {
      const searchValue = document.querySelector("#test").value;
      console.log(searchValue);
  };
  });

如果您确实希望在搜索栏为空时什么都不发生，那么您可以使用类似这样的 if 语句

    // EnterkeyListener
    document.addEventListener('keyup' , function(e){
    
      if (e.key == "Enter") {
          const searchValue = document.querySelector("#test").value;
   // check if searchbar has any value if so then run this code
          if (searchValue) {
            console.log("I have a value")  
            console.log(searchValue);
          } else {   //if not then run this code
            console.log("i don not have a value");
            console.log(searchValue);
          };
      };
      });