JavaScript如何触发div内部嵌套的span元素的focus聚焦效果

父级<div>和内部<span>同时设置了contenteditable属性时，浏览器默认会将可编辑区域的焦点优先绑定到父级容器，导致嵌套的子可编辑元素直接调用.focus()方法无法正常获得焦点。

方案1：使用Selection API手动绑定选区（兼容性最优，无需修改HTML） #

contenteditable元素的聚焦状态和文本选区是绑定的，手动把选区定位到span内部再触发focus即可：

const target = document.querySelector('#haha');
const range = document.createRange();
range.selectNodeContents(target);
const selection = window.getSelection();
selection.removeAllRanges();
selection.addRange(range);
target.focus();

方案2：添加tabindex属性调整聚焦优先级 #

给内部span元素添加tabindex="0"属性，明确将其加入浏览器可聚焦元素队列：

<div contenteditable>
  <span contenteditable id="haha" tabindex="0"><i>asd</i></span>
</div>

修改后你原来的聚焦代码无需调整即可正常生效。

补充说明：如果父级div不需要保留可编辑能力，直接移除父元素的contenteditable属性也可以直接解决该问题。

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