javascript - 当您在输入字段中键入内容时，使文本出现在网站上？

Question

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

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

这是我希望 eventListener 调用的输入：input class="item-container"。

标签： javascripthtmlinputevent-listener

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>