Make text appear on website as you type in an input field?

Viewed 178

Basically, I would like whatever I am typing be printed out in another area of my website. I am assuming I would need an eventListener but not sure how to do the display text as I type part.

<tr id="row">
   <td>
      <input class="item-container" type="text" id="item-input5" maxlength="128">
   </td>
</tr>

Here is the input I want the eventListener to call: input class="item-container".

1 Answers

You can listen to the input event and read the value property of the input element. You can then use this value as textContent in another element or use the value in any other way you'd like.

document.querySelector('#item-input5').addEventListener('input', (event) => {
  document.querySelector('#result_text').textContent = event.currentTarget.value
});
<tr id="row">
  <td>
    <input class="item-container" type="text" id="item-input5" maxlength="128">
  </td>
  <div id="result_text"></div>
</tr>

Related