如何将“Enter”键事件侦听器添加到我使用 querySelector 抓取的输入栏？

问题描述 投票：0回答：1

基本上，我正在遵循这个练习 https://www.youtube.com/watch?v=EerdGm-ehJQ&t=50183s 14n，第 2 部分。

我的页面如下所示：我正在关注其中包含“3”的输入栏

当我按“Enter”时，我想运行一些代码（console.log 只是一个测试），但我什至无法让 Javascript 识别我用来选择“Enter”的“event.key”部分'

这是我所拥有的，“事件”被划掉并且“已弃用”（我不知道这意味着什么）

document.querySelectorAll('.quantity-input')
  .forEach((inputBar) => {
    inputBar.addEventListener('keydown', () => {
      if (event.key === enter) {
        console.log('hello')
      }
    })
  })

“.quantity-input”是您在其中键入数量的输入栏的类名称。

对我来说，上面的代码是这样做的：

  1. 获取页面上的每个输入元素
  2. 对于每个输入元素，让它们留意键盘上的按键。
  3. 如果这些按键之一等于“Enter”。
  4. 运行一些代码

但是‘event.key’中的‘event’被划掉了。

很抱歉，我无法更好地表达这个问题，该项目相当大，很难知道要包含哪些相关的代码。

顺便说一句，当我点击回车时，这就是页面的样子（与我点击保存时完全相同） 更新按钮回来了，准备再次按下

javascript addeventlistener enter onkeydown queryselector
1个回答
0
投票

您需要将 

event
传递给内部函数才能识别它。

还可以用“Enter”来告诉代码它是一个要比较的字符串。

像这样： 

document.querySelectorAll('.quantity-input')
  .forEach((inputBar) => {
    inputBar.addEventListener('keypress', (event) => {
      if (event.key === "Enter") {
        const element = event.target;
        element.value = "Pressed!";
      }
    });
  })
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <link rel="icon" href="/favicon.ico">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>tmp</title>
</head>

<body>
  <div id="app">
    <input class="quantity-input" type="text" value="some" />
  </div>
</body>

</html>

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.