contenteditable=true容器中按ArrowRight光标消失问题排查

现象回顾 #

• 按下左箭头：光标从C123移到B123
• 按下左箭头：光标从B123移到A123
• 按下右箭头：光标直接消失

演示效果 #

复现代码 #

<div contenteditable="true"><a contenteditable="false">A123</a><a contenteditable="false">B123</a><a contenteditable="false">C123</a></div>

原因解释 #

核心问题在于可编辑容器内完全被不可编辑子元素填充，没有可编辑的文本节点或空白区域：

当光标停在最左侧的不可编辑元素A123时，按下右箭头，浏览器尝试将光标移动到下一个可编辑位置，但所有子元素都设置了contenteditable="false"，容器内也没有任何可编辑的文本（比如空格、换行这类空白节点）。浏览器无法将光标放置在不可编辑元素的相邻位置（因为这些区域不属于可编辑范围），所以找不到有效光标位置，最终导致光标消失。

而向左移动时能正常切换，是因为浏览器会把这些不可编辑的块元素当作导航单元，允许光标在它们之间切换，但向右到边界后没有可容纳光标的有效位置，就出现了消失的情况。

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