Question

所以这可能很简单，但我还是做得不对。我的目标是从此文本框中发送用户输入：

<input type='text' placeholder='Form Name...' id='formNameInput' required>

进入此Div ：

<div id="code_output"></div>

我试图让它实时显示，到目前为止我用它来尝试这样做，但它不起作用：

document.getElementById("code_output").innerHTML += document.getElementById("formNameInput").value;

为什么不显示？我的代码是否需要触发Javascript的东西？

Answer 1

你很接近，但问题是你没有使用事件处理程序。脚本正在尽快执行您的代码（在您有机会在文本输入中输入任何内容之前）。因此，您必须添加某种事件侦听器，以便在适当的时间进行复制。如下所示：

document.getElementById('formNameInput').addEventListener('keyup', copyToDiv);

function copyToDiv() {
  document.getElementById("code_output").innerHTML = document.getElementById("formNameInput").value;
}

<input type='text' placeholder='Form Name...' id='formNameInput' required>

<div id="code_output"></div>

Answer 2

只要formNameInput的值发生变化，您就需要这样做。为此，您需要event。

您的代码应如下所示：

document.getElementById("formNameInput").addEventListener('input', function () {
   document.getElementById("code_output").innerHTML += this.value;
});

Answer 3

您需要在输入中附加一个事件侦听器，以便在字段上发生input事件时执行函数：

formNameInput.addEventListener('input', function(e) {
  code_output.textContent = e.target.value
})

<input type="text" placeholder="Form Name..." id="formNameInput" required />
<div id="code_output"></div>

请注意，上面的代码利用了浏览器为具有唯一id属性值的每个元素自动创建全局变量的事实，并且此变量与id的值具有相同的名称。

如果事件的概念对你来说是新的，那么这可能是一个开始的好地方：

https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Building_blocks/Events

Answer 4

function change() {
  document.getElementById("code_output").innerHTML = document.getElementById("formNameInput").value;
}

document.getElementById('formNameInput').onkeyup = change

也许这就是你想要的？

Javascript - 在div中显示输入

4 个答案: