Chrome浏览器中JavaScript Selection API的setBaseAndExtent方法问题

问题描述 #

在Chrome浏览器中使用Selection API实现跨可编辑<span>的反向选择时，出现焦点始终停留在最右侧<span>（span2）的异常：在span2开头按左箭头键触发反向选择，预期选中从span2第2个字符到span0第1个字符的范围，但实际焦点会回到span2，选择功能失效。相同代码在Firefox中可正常工作，焦点会落在span0并显示正确的选择范围。

原测试代码如下：

<html>
<head>
</head>
<body>
<div id="parent1">
    <span id="span0" contenteditable="true" onfocus="onFocus('span0')" onblur="onBlur('span0')">987654</span>
    <span>+</span>
    <span id="span1" contenteditable="true" onfocus="onFocus('span1')" onblur="onBlur('span1')">1234 6789</span>
    <span>µ</span>
    <span id="span2" contenteditable="true"onfocus="onFocus('span2')" onblur="onBlur('span2')">abcdefg</span>
</div>
<br><br>
<button onclick="doForwardSelection()">click</button>

<script>
span0 = document.getElementById("span0");
span2 = document.getElementById("span2");

function onFocus(id){
    console.log("FOCUS on " + id);
}

function onBlur(id){
    console.log("BLUR on " + id);
}

function doForwardSelection(){
    docSel = document.getSelection();
    
    // remove existing selection
    docSel.removeAllRanges();
    
    // set a new forward selection
    docSel.setBaseAndExtent(span0.firstChild, 1, span2.firstChild, 2);
}

function onKeyDown(event){
    //console.log(event);
    if(event.key == "ArrowLeft" && document.getSelection().getRangeAt(0).startOffset == 0){
        event.stopImmediatePropagation();
        event.stopPropagation();
        event.preventDefault();
        // Do the selection manually
        doMultiSelection();
    }
}

function doMultiSelection(){
    docSel = document.getSelection();
    // first focus target
    span0.focus();
    console.log(docSel)
    // then do the extent
    console.log("I call Selection.setBaseAndExtent() now...")
    //docSel.setBaseAndExtent(range.endContainer, range.endOffset, range.startContainer, range.startOffset);
    docSel.setBaseAndExtent(span2.firstChild, 2, span0.firstChild, 1);
    console.log(docSel);
}


document.getElementById("span2").addEventListener('keydown', onKeyDown);

</script>
</body>
</html>

问题原因 #

Chrome与Firefox在处理跨可编辑元素的Selection焦点时存在行为差异：调用span0.focus()后立即执行setBaseAndExtent，Chrome内部可能尚未完成焦点切换的处理流程，导致后续设置的选择范围被浏览器默认行为覆盖，焦点重新回到原始的span2。

解决方案 #

通过延迟执行选择逻辑，给Chrome足够时间完成焦点切换。使用setTimeout将setBaseAndExtent放入宏任务队列，确保焦点切换完成后再设置选择范围。

修改后的doMultiSelection函数 #

function doMultiSelection(){
    docSel = document.getSelection();
    // 先切换焦点
    span0.focus();
    console.log(docSel)
    // 延迟执行选择逻辑，确保Chrome完成焦点切换
    setTimeout(() => {
        console.log("I call Selection.setBaseAndExtent() now...")
        docSel.setBaseAndExtent(span2.firstChild, 2, span0.firstChild, 1);
        console.log(docSel);
    }, 0);
}

优化事件处理逻辑 #

同时优化onKeyDown函数，确保准确判断触发条件，避免不必要的逻辑执行：

function onKeyDown(event){
    const sel = document.getSelection();
    if(event.key === "ArrowLeft" && sel.rangeCount > 0){
        const range = sel.getRangeAt(0);
        // 严格判断光标是否在span2的起始位置
        if(range.startContainer === span2.firstChild && range.startOffset === 0){
            event.stopImmediatePropagation();
            event.stopPropagation();
            event.preventDefault();
            doMultiSelection();
        }
    }
}

效果验证 #

修改后，在Chrome中按左箭头键触发反向选择时，焦点会正确切换到span0，并显示从span2第2个字符到span0第1个字符的选择范围，与Firefox表现一致。

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