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

时间:2019-01-30 22:00:50

标签: javascript addeventlistener keyup

正如标题所述:我想将输入值实时复制到html元素中。我已经尝试过类似的方法,但是它无法正常工作……提前THX!

<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>

2 个答案:

答案 0 :(得分:0)

必须使用输入值来获取即时输入。喜欢:

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

答案 1 :(得分:0)

就像格伊斯所说(发表评论),您的错误是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。