當您在輸入字段中鍵入內容時，使文本出現在網站上？

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>