Strength of contenteditable div stops accepting input after it loses focus under Webkit

Question

In Chrome and Safari browsers (and possibly other Webkit-based browsers), you can still enter content content even after the div loses focus.

I built a simple example to illustrate this problem: http://jsfiddle.net/yfcsU/3/

The example has two elements: a div with contenteditable="true" and a link that will trigger a blur event on the contenteditable div when clicked.

When a link is clicked, the content-accessible div loses focus, but you can still enter the div, and any keystroke will make it focus again.

In Firefox, this behavior is different from where it works as expected: clicking on the link will cause the contenteditable div to stop accepting input.

In Webkit, is there a way to make a content-accessible div stop accepting input after it loses focus without disconnecting the contenteditable on the div?

Answer 1

The answer marked as correct is actually correct, but I would add another solution, which might be a little simpler. After you call blur () in the contentDditable div, you should call it:

 window.getSelection().removeAllRanges(); 

Test here: http://jsfiddle.net/mareksuscak/oytdoxy8/

It seems to me that it does the same job, and also explains why it does not work correctly - usually the selection range is removed from the input elements when it is blurry, but it somehow does not work for contentEditable divs and, therefore, after entering any character / libe break focuses again.

Answer 2

After struggling with this for a while, I found a way to make the content element stop accepting input in Webkit.

The solution is to create a temporary editable element, add it to the DOM, center it, and then delete it. This will force any other content on the page to deactivate itself.

The equivalent jQuery code for this would be:

 $('<div contenteditable="true"></div>').appendTo('body').focus().remove() 

I updated the original example to include a demonstration of this technique: http://jsfiddle.net/yfcsU/4/