在contenteditable div中编辑<a>标签：有无href属性的行为差异问题

我之前也留意到这个有意思的细节，浏览器在处理带href和不带href的<a>标签时，编辑行为确实存在明显区别：

• 带href属性的<a>标签：当光标停在标签内部末尾输入字符时，新内容会被放到标签外部。比如初始代码是：

  <a href="fakelink">tes</a>
  

  输入字符't'后会变成：

  <a href="fakelink">tes</a>t
  

• 无href属性的<a>标签：光标在标签内部末尾输入字符时，新内容会被包含在标签里。比如初始代码是：

  <a>tes</a>
  

  输入字符't'后会变成：

  <a>test</a>
  

这背后其实和浏览器对元素类型的判定有关：带href的<a>是标准的可交互链接，属于交互式内容，浏览器会把它当成一个独立的"交互单元"处理；而不带href的<a>本质上就是个普通行内元素，和<span>的编辑逻辑一致，自然会把新输入的内容纳入容器内。

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