网页按下Enter触发Shift+Enter的实现问题及解决咨询

问题症结 #

你写的代码出现无限循环，本质是手动触发的Shift+Enter事件缺乏特殊标记，可能因事件冒泡或页面其他监听逻辑导致重复触发；而先触发Enter再触发Shift+Enter的异常，是原Enter事件的默认行为与传播未完全阻断就触发了新事件。

解决方案 #

核心思路是给模拟事件添加自定义标识，让监听函数区分原生事件与手动触发事件，同时彻底阻断原Enter事件的传播与默认行为。

通用版完整代码

document.addEventListener('keydown', function(event) {
    // 跳过自身模拟的事件，从根源避免循环
    if (event.isSimulated) return;

    if (event.key === 'Enter' && !event.shiftKey) {
        // 彻底阻止原事件的默认行为和向上冒泡
        event.preventDefault();
        event.stopPropagation();

        // 创建带自定义标记的Shift+Enter事件
        const simulatedEvent = new KeyboardEvent('keydown', {
            key: 'Enter',
            shiftKey: true,
            bubbles: true,
            cancelable: true,
            isSimulated: true // 自定义标记，用于跳过监听处理
        });

        // 在原事件目标上触发模拟事件
        event.target.dispatchEvent(simulatedEvent);
    }
});

针对ChatGPT的精准监听版

如果全局监听有兼容性问题，可以只针对ChatGPT的输入框（DOM选择器需根据页面实际结构调整）：

// 获取ChatGPT输入框元素
const chatInput = document.querySelector('textarea[data-id]');
if (chatInput) {
    chatInput.addEventListener('keydown', function(event) {
        if (event.isSimulated) return;

        if (event.key === 'Enter' && !event.shiftKey) {
            event.preventDefault();
            event.stopPropagation();

            const simulatedEvent = new KeyboardEvent('keydown', {
                key: 'Enter',
                shiftKey: true,
                bubbles: true,
                cancelable: true,
                isSimulated: true
            });

            chatInput.dispatchEvent(simulatedEvent);
        }
    });
}

代码关键点解释 #

• event.isSimulated：自定义属性标记模拟事件，监听函数检测到该属性直接返回，彻底避免无限循环
• event.stopPropagation()：阻止原Enter事件向上冒泡，避免页面其他事件逻辑提前执行，解决顺序异常问题
• cancelable: true：确保模拟事件符合浏览器规范，能被页面正常处理

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