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();