How can I blur a div where contentEditable=true?

Question

How can I blur/focusout a div where contentEditable=true? I have attempted $(elm).blur() and $(elm).attr(\'contentEditable\', false);

Answer 1

I would add another solution that is based on Omnicon's answer which is correct BTW. I have forked his fiddle and updated it.

The trick is to remove all ranges after calling blur:

$(".editable").blur();
window.getSelection().removeAllRanges();

Answer 2

$("div[contentEditable]").blur() to blur all contentEditable elements.

$("#elementId").blur() to blur an element by its id.

Answer 3

The suggested solution by Roman Resh doesn't work when you click into the element and hit enter immediately after. It won't blur but create line-breaks/divs.

It is possible to prevent this behaviour entirely.

See this fiddle

$('<div class="temp-contenteditable-el" contenteditable="true"></div>') .appendTo('body').focus().remove();

Answer 4

Appending to all answers, when using something like

$(".editable").blur()

think about blurring only focused, like

$(".editable:focus").blur()

If not you can get into nice probs sometimes