当您在输入字段中键入时，使文本出现在网站上？答案

【问题标题】：Make text appear on website as you type in an input field?当您在输入字段中键入时，使文本出现在网站上？
【发布时间】：2020-06-10 17:10:28
【问题描述】：

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

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

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

【问题讨论】：

我去掉了另一个 td 标签，因为它只是供参考。我不希望该标签成为 eventListener 的一部分。只有项目容器输入标签是我关心的。谢谢！

标签： javascript html input event-listener

【解决方案1】：

您可以监听input 事件并读取输入元素的值属性。然后，您可以将此值用作另一个元素中的 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>

【讨论】：