javascript - 如何将具有相同输入名称的一组输入框打印到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

只需使用+运算符将当前html与上一个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根据评论。