如何按回车键时聚焦到指定id的可编辑<p>标签

要实现按下回车键时聚焦到id为main的可编辑<p>标签，你需要在回车事件的处理逻辑中添加聚焦操作，同时处理修改内容后的光标定位问题（避免光标停在内容开头）。

修改后的JavaScript代码如下：

document.addEventListener('keydown', (e) => {
    if(e.code === 'Enter' || e.code === 'NumpadEnter') {
        e.preventDefault();
        const mainEl = document.getElementById("main");
        
        if(mainEl.innerHTML === "sudo apt update") {
            mainEl.innerHTML = "checking for updates...";
        }
        
        // 聚焦到目标元素
        mainEl.focus();
        
        // 将光标定位到内容末尾
        const range = document.createRange();
        const selection = window.getSelection();
        range.selectNodeContents(mainEl);
        range.collapse(false);
        selection.removeAllRanges();
        selection.addRange(range);
        
        // 若你的newLine()是手动添加换行，注意contenteditable元素默认回车会自动换行，可根据需求保留或移除该函数
        // newLine();
    }
});

关键要点： #

• 提前获取main元素引用，避免重复调用getElementById，提升代码效率。
• 调用mainEl.focus()直接完成聚焦操作。
• 通过Range和Selection API将光标定位到内容末尾，解决修改innerHTML后光标默认回到开头的问题。
• 若newLine()是手动实现换行逻辑，注意contenteditable元素本身支持回车换行，可根据实际需求决定是否保留该函数。

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