如何在原生JavaScript中限制contenteditable div字符数并解决无法删除问题？

问题根源 #

你参考的代码大概率是在字符数达到上限时，直接通过preventDefault()阻止了所有键盘输入事件，但没有区分输入新字符和删除/编辑操作（比如退格、删除、剪切、快捷键修改），导致合法的编辑操作也被禁用了。

修改后的代码实现 #

<div contenteditable="true" id="editableDiv" style="border:1px solid #ccc; padding:8px; min-height:100px;"></div>

const editableDiv = document.getElementById('editableDiv');
const MAX_LENGTH = 100; // 自定义字符上限

editableDiv.addEventListener('input', function(e) {
    // 获取纯文本内容（排除HTML标签）
    const textContent = this.textContent.trim();
    if (textContent.length > MAX_LENGTH) {
        // 截断到上限长度，同时保留光标位置逻辑
        const selection = window.getSelection();
        const range = selection.getRangeAt(0);
        
        // 截断文本
        this.textContent = textContent.substring(0, MAX_LENGTH);
        
        // 恢复光标到末尾（也可以根据需求调整到截断前的位置）
        selection.removeAllRanges();
        const newRange = document.createRange();
        newRange.selectNodeContents(this);
        newRange.collapse(false); // 光标定位到内容末尾
        selection.addRange(newRange);
    }
});

// 额外处理键盘事件，防止通过粘贴等方式突破限制
editableDiv.addEventListener('keydown', function(e) {
    const textContent = this.textContent.trim();
    // 允许删除、退格、剪切、快捷键（Ctrl+A/C/V/X/Z/Y等）操作
    const allowedKeys = [8, 46, 65, 67, 86, 88, 90, 89];
    const isModifierKey = e.ctrlKey || e.metaKey;
    
    // 如果不是允许的操作，且字符数已达上限，则阻止输入
    if (!isModifierKey && !allowedKeys.includes(e.keyCode) && textContent.length >= MAX_LENGTH) {
        e.preventDefault();
    }
});

关键修改点说明 #

1. 区分操作类型：在keydown事件中，明确允许退格（keyCode 8）、删除（keyCode 46），以及常用的快捷键操作（全选、复制、粘贴、剪切、撤销、重做），只阻止新增字符的操作。
2. 用input事件处理截断：input事件能覆盖所有编辑场景（键盘输入、粘贴、拖拽等），当内容超过上限时，直接截断文本并恢复光标位置，保证编辑流畅性。
3. 获取纯文本内容：使用textContent而非innerHTML，避免HTML标签被计入字符数，确保统计的是实际可见的文本长度。

额外优化建议 #

• 可以添加实时字符计数提示，让用户清楚当前输入长度。
• 如果需要支持富文本（保留部分HTML标签），可以修改文本长度统计逻辑，过滤掉指定标签后再计算。

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