多个contentEditable，无法使用箭头键将carret移动到span的末尾

Question

我有多个跨度，内容可编辑属性设置为true，如下所示：

<span contentEditable='true'> value</span><span contentEditable='true'> value</span><span contentEditable='true'> value</span>

https://jsfiddle.net/du7g39cz/

问题是当我使用箭头键在span元素中导航时，我无法到达单个跨度的末尾，因为当carret到达最后一个符号时会调用blur事件。

我可以在MS Edge之外的所有浏览器上重现此行为。

我必须注意，我不想只保留一个内容可编辑的父级，因为这很容易让用户删除整个段落，用法是让用户一次只能编辑一个单词。

Answer 1

这似乎是一个浏览器错误。它只发生在Firefox中，但是，在跨度中添加任意数量的填充似乎可以解决问题：

span[contentEditable] { padding: 1px; }

https://jsfiddle.net/jimbo2150/du7g39cz/2/