如何将具有相同输入名称的输入框集打印到 div onKeyUP

Question

我将输入框设置为输入 fname lname，这些输入名称有 10 个框。我想将 onKeyup 的值打印到 div。请指教。

<input required class="special-block" type="text" name="fname[]"  class="fname" onkeyUp="document.getElementById('refa5').innerHTML = this.value" placeholder="Name" />
<input required class="special-block" type="text" name="lname[]" placeholder="Designation" onkeyUp="document.getElementById('refa5a').innerHTML = this.value"  />

值应该显示在这里

<p id="refa5"><span class="fname"></span>-<span class="lname"></span></p>

Answer 1

只需使用+ operator 将current html 与previous html 连接起来。 所以改变

onkeyUp="document.getElementById('refa5').innerHTML = this.value"

到

onkeyUp="document.getElementById('refa5').innerHTML+= this.value"//concatenates with previous html 

所以

<input required class="special-block" type="text" name="fname[]"  class="fname" onkeyUp="document.getElementById('refa5').innerHTML+= this.value" placeholder="Name" />
<input required class="special-block" type="text" name="lname[]" placeholder="Designation" onkeyUp="document.getElementById('refa5a').innerHTML+= this.value"  />

Working Fiddle 基于 cmets。