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

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

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基于评论。