在多个id上显示onkeyup事件的结果答案

【问题标题】：Display results of onkeyup event on multiple id在多个id上显示onkeyup事件的结果
【发布时间】：2021-12-03 08:44:42
【问题描述】：

当用户在其中键入时，我试图在多个文本框中获取文本 (jsfiddle playground)：

function Input1(a) {
  document.getElementById("Input11").innerHTML = a.value;
  document.getElementById("Input12").innerHTML = a.value;
  document.getElementById("Input13").innerHTML = a.value;
}
function Input2(b) {
  document.getElementById("Input21").innerHTML = b.value;
  document.getElementById("Input22").innerHTML = b.value;
  document.getElementById("Input23").innerHTML = b.value;
}

结果为

<span id="text-box">
 <input class="textbox-value" type="text" name="Jname" placeholder="Input1" onkeyup="Input1(this);">
  </span><br><br>
  <span id="Input11">Input11</span><br>
  <span id="Input12">Input12</span><br>
  <span id="Input13">Input13</span><br><br>
<span id="text-box">
  <input class="textbox-value" type="text" name="Jbname" placeholder="Input2" onkeyup="Input2(this);">
</span><br><br>
<span id="Input21">Input21</span><br>
<span id="Input22">Input22</span><br>
<span id="Input23">Input23</span><br><br>

上面的代码运行良好。

但我想在页面上多次显示每个“onkeyup”输入。所以在这里我需要更新函数和span id（如果我使用相同的id，那么在第二次调用后它不会显示任何内容）

请帮我重新格式化上面的 JavaScript 和 HTML，所以只需定义输入函数并将其显示在所有 HTML span id 上，而无需每次都更改 span id...

【问题讨论】：

你可以使用class代替id并使用querySelectorAll来选择所有元素这里是代码jsfiddle.net/2kac3t9m

标签： javascript html onkeyup

【解决方案1】：

您可以使用class 代替id 并使用querySelectorAll 选择所有元素这里是示例代码

function Input1(a) {
      const elements = document.querySelectorAll(".Input1");
      elements.forEach((e)=>{
        e.innerHTML = a.value;
      })
      
    }
 function Input2(b) {
      const elements = document.querySelectorAll(".Input2");
       elements.forEach((e)=>{
        e.innerHTML = b.value;
      })
    }

    <html>
    <body><span id="text-box">
        <input class="textbox-value" type="text" name="Jname" placeholder="Input1" onkeyup="Input1(this);">
      </span><br><br>
      <span class="Input1">Input11</span><br>
      <span class="Input1">Input12</span><br>
      <span class="Input1">Input13</span><br><br>
    <span id="text-box">
      <input class="textbox-value" type="text" name="Jbname" placeholder="Input2" onkeyup="Input2(this);">
    </span><br><br>
    <span class="Input2">Input21</span><br>
    <span class="Input2">Input22</span><br>
    <span class="Input2">Input23</span><br><br>
    </body>
 </html>

【讨论】：

【解决方案2】：

你可以这样做：

document.querySelectorAll('div.text-box').forEach( (box,i) => 
  {
  let 
    intxt  = box.querySelector('input')
  , spTxts = box.querySelectorAll('span')
    ;
  intxt.mane        = `Jname${++i}`
  intxt.placeholder = `Input${i}`
  intxt.onkeyup = () => spTxts.forEach(sp=>sp.textContent = intxt.value)
  })

.text-box {
  margin  : 20px 0 15px 0; 
}
.text-box input {
  width         : 100%;
  font-size     : 13px;
  padding       : 5px;
  margin-top    : -5px;
  margin-bottom : 1em;
  box-shadow    : 1px 5px 7px #75757578;
}
.text-box span {
  display       : block;
}

<div class="text-box">
  <input type="text">
  <span>...</span>
  <span>...</span>
  <span>...</span>
</div>

<div class="text-box">
  <input type="text">
  <span>...</span>
  <span>...</span>
  <span>...</span>
</div>

<div class="text-box">
  <input type="text">
  <span>...</span>
  <span>...</span>
  <span>...</span>
</div>

<div class="text-box">
  <input type="text">
  <span>...</span>
  <span>...</span>
  <span>...</span>
</div>

【讨论】：

谢谢您，先生，但是当我收集所有输入并将其显示在同一网页的不同部分时，仅显示第一个输出..有关详细信息，我正在处理 github.com/bsahane/live

【解决方案3】：

这是最适合你的！

function Input(a, n) {
  var spans = document.querySelectorAll('#tb' + n + ' span')
  spans.forEach(function(span){
    span.innerHTML = a.value;
  })
}

.textbox-value {
  width: 100%;
  font-size: 13px;
  padding: 5px;
  margin-top: -5px;
  box-shadow: 1px 5px 7px #75757578;
}

<html>

<body>
  <div id="tb1" class="text-box">
    <input class="textbox-value" type="text" name="Jname" placeholder="Input1" onkeyup="Input(this, '1');" />
    <br><br>
    <span>Input11</span><br>
    <span>Input12</span><br>
    <span>Input13</span><br>
  </div>
  <br>
  <div id="tb2" class="text-box">
    <input class="textbox-value" type="text" name="Jbname" placeholder="Input2" onkeyup="Input(this, '2');">
    <br><br>
    <span>Input21</span><br>
    <span>Input22</span><br>
    <span>Input23</span><br>
  </div>
  <br>
</body>

</html>

【讨论】：

谢谢先生您的解决方案，但我一次收集所有输入并根据要求将它们全部显示在页面的不同位置。喜欢jsfiddle.net/bsahane/e69L2m01/7 所以你能提供同样的更新吗..