textarea中Tab键可用，contenteditable div中Tab键失效求助

contenteditable div和textarea的选区机制不同：textarea有专属的selectionStart/selectionEnd属性，但contenteditable元素没有，直接照搬textarea的逻辑会导致选区位置获取错误，进而出现文本重复的问题。

以下是修正后的完整代码：

JavaScript #

$('.btex').on('keydown', function(e){
    if (e.keyCode === 9){
        var val = this.value;
        var start = this.selectionStart;
        var end = this.selectionEnd;
        this.value = val.substring(0, start) + '\t' + val.substring(end);
        this.selectionStart = this.selectionEnd = start + 1;
        e.preventDefault();
        return false;
    }
});

$('.bdiv').on('keydown', function(e){
    if (e.keyCode === 9){
        // 阻止Tab键默认切换焦点行为
        e.preventDefault();
        e.stopPropagation();
        
        const selection = window.getSelection();
        if (!selection.rangeCount) return;
        
        const range = selection.getRangeAt(0);
        const tabNode = document.createTextNode('\t');
        
        // 删除选中内容（如果有）
        range.deleteContents();
        // 插入制表符
        range.insertNode(tabNode);
        
        // 调整光标到制表符后方
        range.setStartAfter(tabNode);
        range.setEndAfter(tabNode);
        selection.removeAllRanges();
        selection.addRange(range);
    }
});

CSS #

.btex{display:block; padding:9px; width:100%; min-height:54px; background:lightblue; border:0; outline:none;}
.bdiv{padding:9px; min-height:54px; background:lightblue; overflow-wrap: break-word;
    -webkit-user-modify: read-write-plaintext-only; border:0; outline:none;}

HTML #

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<textarea class='btex'></textarea>
<br>
<div class='bdiv' contenteditable="true"></div>

关键修正点 #

• 给.bdiv补充contenteditable="true"属性（原代码遗漏了这个核心属性）
• 使用window.getSelection()和Range对象处理contenteditable元素的文本插入与选区定位
• 调用e.preventDefault()和e.stopPropagation()彻底阻止Tab键的默认焦点切换行为

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