如何实现按Enter键关闭contenteditable并恢复原键盘事件监听？

你可以通过以下步骤完善代码，实现按下Enter关闭contenteditable容器的功能，同时解决原代码中重复绑定事件的问题：

修改后的完整代码 #

// 定义临时keydown处理函数，方便后续移除
let tempKeydownHandler;

container.addEventListener('click', (event) => {
    if (event.target.classList.contains('targetSpan')) {
        // 移除原全局keydown监听
        document.removeEventListener('keydown', keyDownEvents);
        
        // 编写临时的Enter键处理逻辑
        tempKeydownHandler = (event) => {
            if (event.key === 'Enter') {
                // 阻止Enter默认换行行为，避免在可编辑元素中插入多余换行
                event.preventDefault();
                
                // 恢复原全局keydown监听
                document.addEventListener('keydown', keyDownEvents);
                // 移除临时keydown监听，防止重复触发
                document.removeEventListener('keydown', tempKeydownHandler);
                
                // 关闭contenteditable容器：将目标span设为不可编辑
                const editableSpan = event.target;
                editableSpan.setAttribute('contenteditable', 'false');
                // 可选：让元素失去焦点，确保编辑状态完全结束
                editableSpan.blur();
            }
        };
        
        // 添加临时keydown监听
        document.addEventListener('keydown', tempKeydownHandler);
    }
});

关键细节说明 #

• 避免重复绑定事件：用命名的tempKeydownHandler替代原代码中的匿名函数，这样在触发Enter后可以移除该临时监听，防止多次点击span后产生多个重复的事件监听。
• 关闭编辑状态：通过setAttribute('contenteditable', 'false')将目标span的可编辑状态关闭，也可以使用editableSpan.removeAttribute('contenteditable')达到相同效果。
• 清理临时监听：在完成Enter键的处理逻辑后，必须移除临时的keydown监听，避免后续操作中出现不必要的事件触发。

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