JavaScript 将输入值复制到 keyup 上的 innerHTML (addEventListener)

Question

正如标题所说：我想将输入值复制到 html 元素（实时）。我已经尝试过类似的方法，但它不起作用...提前感谢！

<input type="text" id="test" value="">

<p id="box"></p>


<script type="text/javascript">

document.getElementById('test').addEventListener('keyup', function () {

document.getElementById('box').innerhtml = document.getElementById('test').value;

});

</script>

Answer 1

您必须使用输入值才能获得即时输入。喜欢：

document.getElementById('input').addEventListener('input', (e) => {
    document.getElementById('box').innerHTML = e.target.value
})

Answer 2

正如 Geuis 所说（post 评论），您的错误是 innerHTML（而不是 innerhtml），请参阅：https://codesandbox.io/s/724r405wo1

我鼓励您将代码更改为：

var box = document.getElementById('box')

document.getElementById('test').addEventListener('keyup', function (event) {
    box.innerHTML = event.target.value
});

所以你不用每次都查询dom。

JavaScript 将输入值复制到 keyup 上的 innerHTML (addEventListener)

JavaScript copy Input value to innerHTML on keyup (addEventListener)

javascript

addeventlistener

keyup