2

When I clear the contents of a contenteditable div, the cursor is lost immidiately and I can't bring it back by clicking.So I can't add anything if I clear it once.

Here check it out:

<div contenteditable>
  asdasd
  <div contenteditable="false">x</div>
</div>

Delete the 'asdasd' from the first line. As soon as you delete the last deletable character, the cursor is gone and I can't bring it back.

I just tried it in firefox and it works fine. So this is specific to chrome.

Achshar
  • 4,993
  • 8
  • 37
  • 70
  • I don't have any problem with that. My issue is that as soon as the element becomes empty, the cursor disappears and I loose focus without clicking anything. If someone is typing something and wants to clear the area, they can't write anything after that. – Achshar Jul 21 '16 at 00:41
  • make an example: http://jsbin.com/ – greggreg Jul 21 '16 at 00:47

1 Answers1

1

This should solve your problem. You can click that area even after it is empty and get your cursor back. Checkout the following link:

Restore cursor position after changing contenteditable

Community
  • 1
  • 1
UIPassion
  • 95
  • 7
  • It already works like that if the content is empty. But my code has another non editable div in it. Which messes with it. – Achshar Jul 21 '16 at 01:32
  • See if you can avoid the nesting of the 2 contenteditables. I just tried to make the second div outside of the parent, it works then. Also, instead of making the whole parent div contenteditable, or you can add another div like:
    asdasd
    x
     – UIPassion Jul 21 '16 at 03:05
  • Yeah that was a solution but for me that complicates many other things that I skipped over here. This works as intended in firefox btw, so only chrome screws it up. – Achshar Jul 21 '16 at 03:56