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

Question

我正在尝试在用户输入时获取多文本框中的文本 (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 ...

Answer 1

你可以这样做：

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>

Answer 2

你可以用class代替id，用querySelectorAll到select这里的所有元素都是示例代码

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>

Answer 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>

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

Display results of onkeyup event on multiple id

html

javascript

onkeyup