如何实现div标签文本实时更新？现有代码延迟问题求助

嘿，这个问题我之前也踩过坑～原因其实很直观：你用的onkeydown事件触发时机不对！

当keydown事件触发时，浏览器还没把你刚按下的字符写入输入框呢。所以此时你获取的input.value其实是按下这个键之前的内容，等你按下下一个键时，才会把上一次输入的内容显示出来，自然就出现了延迟同步的问题。

两种靠谱的解决办法： #

1. 改用input事件（强烈推荐）

input事件是浏览器专门用来监听输入框内容变化的事件，不管你是打字、粘贴、删除还是拖拽文本进去，只要输入框内容有变动，它就会立即触发，完全匹配你实时同步的需求：

<textarea id="input" oninput="updateOutput()"></textarea>
<div id="output"></div>
<script>
function updateOutput() {
  const input = document.getElementById('input').value;
  document.getElementById('output').innerHTML = input;
}
</script>

2. 改用keyup事件

如果非要绑定键盘相关事件，那keyup会更合适——它是在按键松开时触发的，此时浏览器已经把字符写入输入框了，能拿到最新的输入内容：

<textarea id="input" onkeyup="pressed()"></textarea>
<div id="output"></div>
<script>
function pressed() {
  const input = document.getElementById('input').value;
  document.getElementById('output').innerHTML = input;
}
</script>

小提醒： #

优先选input事件哦，它的适用场景比keyup广太多了——比如用户用鼠标右键粘贴内容、或者拖拽文本到输入框里时，keyup根本不会触发，但input能完美捕获到这些操作带来的内容变化。

内容的提问来源于stack exchange，提问作者dummycode