当我在特定文本框中按回车键时，如何使文本框一次更改一个背景颜色（当有多个文本框时）？

Question

我想弄清楚如何创建一个包含多行文本框的表单，当参与者在每个文本框中输入他们的回复并按下回车键时，文本框的背景会从白色变为黑色，以便隐藏他们刚刚输入的回复。但是目前，当我在第一个文本框上按 Enter 键时，所有文本框都从白色变为黑色，或者最后一个文本框变为黑色，而不仅仅是第一个文本框。有什么解决办法吗？由于我正在使用的平台使用基于 javascript 的语言，因此我尝试将代码转换为 javascript 但我不确定它是否准确。谢谢，非常感谢任何帮助！

function enter(e) {
      if (e.keyCode == 13)
  document.getElementById("response1").style.backgroundColor = "red";
}

function enter(e) {
      if (e.keyCode == 13)
  document.getElementById("response2").style.backgroundColor = "red";
}

function enter(e) {
      if (e.keyCode == 13)
  document.getElementById("response3").style.backgroundColor = "red";
}

Answer 1

您创建了 3 个侦听器，它们在按下 ENTER 时执行，而不管它发生在何处，因此当您按下 Enter 时，所有 3 个侦听器都会运行ning。

您需要让他们知道按下 ENTER 时哪个元素处于活动状态，您可以从 event.target 访问它，例如通过他们的 id:

document.addEventListener("keyup", (event) => {
  if (event.keyCode == 13) document.getElementById(event.target.id).style.backgroundColor = "red";
})

<div><input style="text" id="one"></div>
<div><input style="text" id="two"></div>
<div><input style="text" id="three"></div>

您可以运行此代码段并在一个或多个文本输入中按 ENTER

Answer 2

每个元素都有相同的 enter() 函数。难怪他们都火了。试试这个方法：

function enter(e) {
  if (e.keyCode == 13) {
   let tocolor;
   switch (e.target.name) {
     case "nameattributeoftextbox1": tocolor = "response1"; break;
     case "nameattributeoftextbox2": tocolor = "response2"; break;
...
   }
   document.getElementById(tocolor).style.backgroundColor = "red";
  }
}

当我在特定文本框中按回车键时，如何使文本框一次更改一个背景颜色（当有多个文本框时）？

How to make textbox change background color one at a time (when there are multiple textboxes) when I press enter in particular textbox?

javascript

textbox

background-color