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

Answers:

Answer

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

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

Answer

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

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

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

Tags

Recent Questions

Top Questions

Home Tags Terms of Service Privacy Policy DMCA Contact Us

©2020 All rights reserved.