同时将输入字段内容复制到另一个字段中

Question

首先，这似乎是一个非常简单的问题，但是，到目前为止我找到的解决方案还没有起作用，他们大多建议使用 jQuery，但是，当我使用 Bootstrap 5 时，他们已经放弃了 jQuery ，所以我希望尽可能不要使用它来支持 JavaScript，或者甚至只是 HTML（如果有的话）。

基本上，我的问题是我在画布外设置区域中有一个输入字段。当用户在该字段中输入任何内容时，我希望该数字以另一个文本字段或其他内容的形式出现在 HTML 正文中。这种情况可能发生在他们打字、每次按键更新或使用提交按钮时，两者都可以正常工作。我提供了一个屏幕截图以更好地解释我的意思：

我人为地在左侧添加了文本，以帮助直观地了解我想要实现的目标，目前在中心 ID 号字段中输入文本没有任何作用。

如果有人能指出我正确的方向，我将不胜感激。

干杯。

Answer 1

1. 引用输入和输出元素
2. 将

   addEventListener

   与

   keyup

   事件结合使用
3. 引用输出元素并使用

   textContent

   从输入

   复制 

   this.value

const INPUT = document.querySelector('input');
const OUTPUT = document.querySelector('output');

INPUT.addEventListener('keyup', function() {
  OUTPUT.textContent = this.value;
})

<input>
<br>
<output></output>