如何在原生JavaScript中实现textarea输入时实时更新预览内容

你当前代码使用的change事件触发条件为输入框失去焦点且内容发生修改，因此只会在失焦时更新预览。原生JS可通过input事件实现实时同步，该事件会在输入框内容发生任何变更时立即触发，覆盖键盘输入、粘贴、剪切等所有修改内容的场景。

修改后的代码 #

仅需将事件监听的change替换为input即可：

const preview = document.getElementById('preview');
const editor = document.getElementById('editor');

editor.addEventListener('input', (event) => {
  console.log(event);
  preview.textContent = event.target.value;
})

补充说明 #

• 如果后续需要实现Markdown等富文本渲染，可将textContent替换为innerHTML，但需要提前对输入内容做HTML标签过滤，避免出现XSS安全风险。
• 若需要兼容IE9及以下的老旧浏览器，可以额外补充监听propertychange事件做降级处理，目前所有主流浏览器均原生支持input事件，无需额外兼容。

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