ContentEditable element looses cursor as soon as it's empty

Question

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.

Answer 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