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,555
  • 31
  • 31
  • 45
user3482211
  • 446
  • 4
  • 17

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
  • 3,210
  • 2
  • 17
  • 23