Множественное contentEditable, неспособное переместить carret до конца диапазона с помощью клавиш со стрелками

У меня есть несколько интервалов с возможностью редактирования контента, равным true, например:

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

https://jsfiddle.net/du7g39cz/

Проблема в том, что когда я использую клавиши со стрелками для перемещения по элементу span, я не могу достичь конца отдельного пролета, поскольку событие blur вызывается, когда carret достигает последнего символа.

Я могу воспроизвести это поведение во всех браузерах, кроме MS Edge.

Я должен отметить, что мне не хотелось бы оставлять только один контент, редактируемый родительский, так как это легко позволит пользователю удалить весь абзац, intenion - позволить пользователю редактировать только одно слово за раз.

Ответ 1

Похоже на ошибку браузера. Это происходит только в Firefox для меня, однако, добавление любого количества отступов к промежуткам, похоже, исправляет проблему:

span[contentEditable] { padding: 1px; }

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