Multiple contentEditable, nie mogąc się ruszyć CARRET do końca przęsła za pomocą klawiszy strzałek

Question

Mam kilka przęseł z treścią własności edycji wartość true, jak poniżej:

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

https://jsfiddle.net/du7g39cz/

Problem jest to, że kiedy jestem za pomocą klawiszy strzałek poruszać się po elemencie span, nie mogę osiągnąć końca pojedynczego span, ponieważ zdarzenie blur zostaje wywołane, gdy karret osiągnie ostatni symbol.

Mogę odtworzyć to zachowanie we wszystkich przeglądarkach oprócz MS Edge.

Muszę zauważyć, że nie chciałbym mieć tylko jednego edytowalnego elementu nadrzędnego, ponieważ pozwoliłoby to użytkownikowi na usunięcie całego akapitu, a jego celem jest umożliwienie użytkownikowi edycji tylko jednego słowa naraz.

Answer 1

Wygląda na błąd przeglądarki. To się dzieje tylko w Firefoksie dla mnie jednak, dodając dowolną ilość wyściółki do przęseł wydaje się rozwiązać ten problem:

span[contentEditable] { padding: 1px; } 

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