contenteditable元素中，光标究竟会停留在哪里？

contenteditable属性下的光标行为

在contenteditable元素中，光标通常位于元素文本内容之间，而非标签内部。然而，以下情况可能导致光标出现在标签内：

• 元素被选中： 如果用户选中了contenteditable元素，光标将位于该元素的标签内部。
• 嵌套块级元素： 如果contenteditable元素包含嵌套的块级元素（例如<div>或<code><table>），光标可能出现在这些嵌套元素内部。 <li> <strong>contenteditable="false"：</strong> 如果一个子元素的<code>contenteditable属性设置为"false"，光标将无法进入该子元素内部。

W3C规范对光标位置有明确定义：


慧中标AI标书
慧中标AI标书是一款AI智能辅助写标书工具。
120
查看详情
• 文档根元素（）： 光标可在元素的任何位置。
• 文本块级元素（例如<p></p>）： 光标可位于文本内容的任意位置，但不能位于标签内部。
• 块级元素（例如<div>）： 光标可位于块级元素内的任意位置，包括标签内部。 <li> <strong>内联元素（例如<code><span></span>）： 光标可位于内联元素文本内容的任意位置，但不能位于标签内部。
• 表格元素（例如<tr>）： 光标可位于表格元素的任意单元格或标签内部。 </tr>