Claude.ai中e.preventDefault()无法阻止Enter键提交的问题求助

问题根源 #

1. 事件优先级与传播顺序：Claude使用的ProseMirror编辑器会在事件冒泡阶段之前（或内部）处理键盘事件，普通的keydown监听（冒泡阶段）会被编辑器自带的事件覆盖。
2. 重复事件绑定：原脚本在每次DOM变动时都给编辑器添加keydown监听，导致多个事件处理函数冲突，甚至可能被浏览器的事件处理机制忽略。
3. 直接操作DOM不符合编辑器规范：ProseMirror有自己的文档状态管理系统，手动插入<br>和文本节点会破坏编辑器的内部状态，无法正确触发编辑器的更新逻辑。

解决方案 #

核心思路 #

• 使用事件捕获阶段拦截键盘事件，确保自定义逻辑先于编辑器自带逻辑执行。
• 只绑定一次事件，避免重复绑定导致的冲突。
• 调用ProseMirror官方API执行换行和提交操作，而非直接操作DOM。

修改后的脚本代码 #

// ==UserScript==
// @name         Claude.ai Swap Enter and Ctrl+Enter
// @namespace    http://tampermonkey.net/
// @version      0.2
// @description  Swap enter and ctrl+enter on claude.ai
// @author       You
// @match        https://www.claude.ai/*
// @icon         https://www.google.com/s2/favicons?domain=claude.ai
// @grant        none
// ==/UserScript==

(function() {
    'use strict';
    let editorBound = false; // 标记是否已绑定事件

    const observer = new MutationObserver((mutations) => {
        if (!editorBound) {
            const editor = document.querySelector('.ProseMirror');
            if (editor) {
                // 使用事件捕获阶段绑定，确保优先处理
                editor.addEventListener('keydown', handleKeydown, true);
                editorBound = true; // 标记已绑定，避免重复操作
            }
        }
    });

    function handleKeydown(e) {
        // 处理单独按Enter的情况：插入换行
        if (e.key === 'Enter' && !e.ctrlKey && !e.shiftKey) {
            e.preventDefault();
            e.stopPropagation(); // 阻止事件继续传播给编辑器的默认处理
            
            // 调用ProseMirror的硬换行命令（模拟Shift+Enter的行为）
            if (window.editorView?.dispatch) {
                window.editorView.dispatch(
                    window.editorView.state.tr.insertHardBreak()
                );
            } else {
                // 降级方案：如果无法获取editorView，用DOM操作兼容
                const sel = window.getSelection();
                const range = sel.getRangeAt(0);
                const br = document.createElement('br');
                range.deleteContents();
                range.insertNode(br);
                range.setStartAfter(br);
                range.setEndAfter(br);
                sel.removeAllRanges();
                sel.addRange(range);
                // 触发编辑器的input事件，确保内容被识别
                editor.dispatchEvent(new Event('input', { bubbles: true }));
            }
        }
        // 处理Ctrl+Enter的情况：提交内容
        else if (e.key === 'Enter' && e.ctrlKey) {
            e.preventDefault();
            e.stopPropagation();
            
            const submitBtn = document.querySelector('button[type="submit"]');
            if (submitBtn) {
                submitBtn.click();
            }
        }
        // Shift+Enter保持原有行为，不做处理
    }

    observer.observe(document.body, {
        childList: true,
        subtree: true
    });
})();

关键改进点 #

1. 事件捕获绑定：addEventListener第三个参数设为true，在事件捕获阶段拦截，确保自定义逻辑先执行。
2. 避免重复绑定：用editorBound变量标记是否已绑定事件，防止DOM变动时重复添加监听。
3. 使用ProseMirror API：优先通过window.editorView调用官方的insertHardBreak()命令，符合编辑器的状态管理逻辑；如果无法获取editorView，则提供DOM操作的降级方案，并触发input事件让编辑器识别内容变化。
4. 阻止事件传播：使用e.stopPropagation()阻止事件继续传递给编辑器的默认处理函数，确保自定义行为生效。

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