输入焦点时阻止事件侦听器

Question

我在脚本中设置了一些键绑定，但是当我关注输入字段时，我不希望它们触发。我已经尝试过 removeEventListener() 但无法完全按照我想要的方式工作。

document.addEventListener("keydown", (e) => {
  if (e.code == "Enter") {
    e.preventDefault();
    toggleHiddenElements();
  }
  else if (e.code == "KeyA") {
    toggleScene("vorspann");
  }
  else if (e.code == "KeyE") {
    toggleScene("abspann");
  }
  else if (e.code == "KeyL") {
    loadSetup();
  }
  else if (e.code == "KeyR") {
    resetUI();
  }
});

这是输入字段之一，例如：

<input type="text" id="vorspann-thema" placeholder="Enter a title">

最简单的解决方案是使用您通常不需要的绑定，例如 F 键，但遗憾的是它们必须是 A、E、L、R 和 Enter。

以下建议无效：

var speakerfocus = false;

function getfocus(e) {
  speakerfocus = true;
  console.log(speakerfocus);
}

document.getElementById("speakers-schmal").addEventListener("click", getfocus);

document.addEventListener('click', removefocus);

function removefocus(e) {
  if (e.target != document.getElementById("bauchbinde-schmal")) {
    speakerfocus = false;
    console.log(speakerfocus);
    return;
  }
};

Answer 1

使用布尔标志来确定输入是否处于焦点。给input添加一个点击事件监听器，如果flag为true，则改为false，否则改为true。然后你可以在你的键绑定中使用 if 语句。

let focus = false;
document.getElementById('vorspann-thema').addEventListener('click', () => {
focus = true;
});
document.addEventListener('click', (e) => {
if (e.target != document.getElementById('vorspann-thema') focus = false;
});

Answer 2

在 expressjs123 的帮助下，我最终找到了解决问题的方法。

为了让代码适用于我所有的输入标签，我必须使用 getElementsByTagName 它创建了我所有输入标签的列表，然后我用 for-循环。

为“点击”设置一个 eventListener，使焦点等于 true，为 'blur' 设置一个 eventListener，因此离开时焦点等于 false输入字段。

可以在此处查看示例！

let focus = false;
let inputList = document.querySelectorAll("input[type=text]");
for (let i = 0; i < inputList.length; i++) {
  inputList[i].addEventListener('click', () => {
    focus = true;
  })
  inputList[i].addEventListener('blur', () => {
    focus = false;
  })
}

document.addEventListener("keydown", (e) => {
  if (focus == false) {
    if (e.code == "KeyR") {
      redBGcolor();
    } else if (e.code == "KeyG") {
      greenBGcolor();
    }
  }
})

function redBGcolor() {
  document.getElementById("bod").classList.add('red');
  document.getElementById("bod").classList.remove('green');
}

function greenBGcolor() {
  document.getElementById("bod").classList.add('green');
  document.getElementById("bod").classList.remove('red');
}

.red {
  background-color: red;
}

.green {
  background-color: green;
}

input {
  margin-top: 5px;
}

<body id='bod'>

  <input type="text" id="fname"><br>
  <input type="text" id="lname"><br>
  <input type="text" id="mname"><br>
  <input type="text" id="tname"><br>

</body>

输入焦点时阻止事件侦听器

Prevent evenListener when input is in focus

html

javascript

addeventlistener