当你在输入栏中输入文字时，让文字出现在网站上？

Question

基本上，我想让我输入的内容在网站的另一个区域打印出来。我假设我需要一个eventListener，但不确定如何在我输入时显示文本的部分。

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

下面是我想让eventListener调用的输入：input class="item-container"。

Answer 1

你可以听 input 事件并读取输入元素的value属性。然后，你可以在另一个元素中使用这个值作为textContent，或者以你喜欢的任何其他方式使用这个值。

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>