如何禁用文本框中的所有快捷键？现有属性无法完全禁用

阿华AIGC实验室

2026-5-28

解决shortcuts enabled无法禁用全部快捷键的问题

我完全懂你碰到的困扰——shortcuts enabled属性确实只能管控一部分预设快捷键，像你提到的Ctrl+鼠标滚轮缩放、Ctrl+Shift++输入上标这类操作，它根本管不到。下面我会给你一套通过快捷键名称/ID/按键组合精准禁用的可行方案，同时附上主流富文本编辑器里常见快捷键的详细信息列表。

一、精准禁用特定快捷键的实操方案

根据你使用的编辑器类型，有两种主流思路：

1. 利用编辑器内置API按名称/ID禁用

如果是CKEditor、TinyMCE这类成熟的富文本编辑器，它们大多提供了直接管理快捷键的API：

CKEditor 5示例：可以在初始化时移除对应插件，或者运行时禁用指定命令：

ClassicEditor
    .create(document.querySelector('#editor'), {
        toolbar: ['heading', 'bold', 'italic'],
        // 直接移除缩放功能的插件
        removePlugins: ['ZoomCommand'],
    })
    .then(editor => {
        // 运行时禁用上标对应的命令
        editor.commands.get('superscript').disable();
    })
    .catch(error => {
        console.error(error);
    });

TinyMCE示例：通过setup配置项拦截快捷键或命令：

tinymce.init({
    selector: '#editor',
    setup: function(editor) {
        // 拦截Ctrl+Shift++的上标快捷键，返回false阻止默认行为
        editor.addShortcut('ctrl+shift+plus', '', function() {
            return false;
        });
        // 拦截Ctrl+鼠标滚轮触发的缩放
        editor.on('MouseWheel', function(e) {
            if (e.ctrlKey) {
                e.preventDefault();
                return false;
            }
        });
    }
});

2. 全局监听事件手动拦截

如果你的编辑器没有提供现成的API，也可以通过原生事件监听来拦截：

const editorBox = document.querySelector('#your-editor-container');

// 拦截Ctrl+Shift++输入上标
editorBox.addEventListener('keydown', function(e) {
    if (e.ctrlKey && e.shiftKey && (e.key === '+' || e.key === 'Equal')) {
        e.preventDefault();
        e.stopPropagation();
    }
});

// 拦截Ctrl+鼠标滚轮缩放
editorBox.addEventListener('wheel', function(e) {
    if (e.ctrlKey) {
        e.preventDefault();
        e.stopPropagation();
    }
}, { passive: false }); // 必须设为false才能阻止默认滚轮行为