12

I have multiple spans with content editable property set to true, like this:

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

https://jsfiddle.net/du7g39cz/

Problem is that when I am using arrow keys to navigate around span element, I can not reach end of individual span as blur event gets called when caret reaches last symbol.

I can reproduce this behavior on all browsers apart MS Edge.

I must note that I wouldn't like to keep only one content editable parent, as this would easily let user to delete whole paragraph, intention is to let user edit only one word at a time.

General Grievance
  • 4,259
  • 21
  • 28
  • 43
user3482211
  • 366
  • 2
  • 16

1 Answers1

4

It seems like a browser bug. It is only happening in Firefox for me, however, adding any amount of padding to the spans seems to correct the issue:

span[contentEditable] { padding: 1px; }

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

Jim
  • 2,485
  • 1
  • 15
  • 22