TextArea输入无法实时镜像至预览段落，KeyPress事件失效如何解决？

核心问题原因 #

你遇到的延迟更新问题，是因为keypress事件的触发时机不对——当这个事件触发时，用户刚输入的字符还没被写入textarea的value属性里，所以你获取到的是输入前的旧内容，自然要等下一次输入才会显示新内容。而change事件只有在textarea失去焦点时才会触发，根本满足不了实时更新的需求。

另外你的代码还有两个小问题：

1. textarea标签写错了，是<textarea>不是<text area>
2. 只处理了三个反引号的情况，没实现四个空格开头的判断，也没在不满足条件时隐藏代码工具

修正后的代码 #

HTML部分

<textarea oninput="duplicate()" class="form-control" rows="10" cols="10" id="text"></textarea>
<p id="content"></p>
<div id="codeTool" style="visibility: hidden;">代码格式化工具</div>

JavaScript部分

function duplicate() {
    const tool = document.getElementById("codeTool");
    const para = document.getElementById("content");
    const texta = document.getElementById("text").value;
    
    // 实时镜像内容到段落
    para.innerText = texta;

    // 处理当前行判断
    const lines = texta.split("\n");
    // 处理textarea为空的情况，避免报错
    if (lines.length === 0) {
        tool.style.visibility = "hidden";
        return;
    }
    const cline = lines[lines.length - 1];
    // 判断当前行是否以四个空格或三个反引号开头
    const isCodeLine = cline.startsWith("    ") || cline.startsWith("```");
    
    // 显示/隐藏工具
    tool.style.visibility = isCodeLine ? "visible" : "hidden";
}

关键改动说明 #

• 把onkeypress换成oninput：input事件会在用户输入、删除、粘贴等任何导致textarea内容变化的操作时立即触发，能实时获取最新的输入内容。
• 修正textarea标签：去掉多余的空格，确保标签正常解析。
• 完善判断逻辑：同时支持四个空格和三个反引号的检测，并且在当前行不满足条件时自动隐藏工具。
• 增加空内容处理：避免textarea为空时lines[lines.length - 1]报错。

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