多个内容可编辑，无法使用箭头键将插入符号移动到跨度的末尾
Multiple contentEditable, unable to move carret to end of span with arrow keys
我有多个 span，内容可编辑 属性 设置为 true，如下所示：
<span contentEditable='true'> value</span><span contentEditable='true'> value</span><span contentEditable='true'> value</span>
https://jsfiddle.net/du7g39cz/
问题是，当我使用箭头键在 span 元素周围导航时，我无法到达单个 span 的末尾，因为当插入符号到达最后一个符号时会调用模糊事件。
我可以在除 MS Edge 之外的所有浏览器上重现此行为。
我必须注意，我不想只保留一个内容可编辑父级，因为这很容易让用户删除整个段落，目的是让用户一次只能编辑一个词。
这似乎是浏览器错误。对我来说，这只发生在 Firefox 中，但是，向 span 添加任意数量的填充似乎可以解决这个问题：
span[contentEditable] { padding: 1px; }
我有多个 span，内容可编辑 属性 设置为 true，如下所示：
<span contentEditable='true'> value</span><span contentEditable='true'> value</span><span contentEditable='true'> value</span>
https://jsfiddle.net/du7g39cz/
问题是，当我使用箭头键在 span 元素周围导航时，我无法到达单个 span 的末尾，因为当插入符号到达最后一个符号时会调用模糊事件。
我可以在除 MS Edge 之外的所有浏览器上重现此行为。
我必须注意，我不想只保留一个内容可编辑父级，因为这很容易让用户删除整个段落，目的是让用户一次只能编辑一个词。
这似乎是浏览器错误。对我来说，这只发生在 Firefox 中，但是，向 span 添加任意数量的填充似乎可以解决这个问题：
span[contentEditable] { padding: 1px; }