How can I blur a div where contentEditable=true?

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



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

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


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:


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


Appending to all answers, when using something like


think about blurring only focused, like


If not you can get into nice probs sometimes


Recent Questions

Top Questions

Home Tags Terms of Service Privacy Policy DMCA Contact Us

©2020 All rights reserved.