16

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

Brian Tompsett - 汤莱恩
  • 5,753
  • 72
  • 57
  • 129
Babiker
  • 18,300
  • 28
  • 78
  • 125

4 Answers4

38

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();
Marek Suscak
  • 1,086
  • 10
  • 25
  • This worked for me, thanks. Omnicon's did not work for me, partly because it scrolled the whole document to the bottom when invoked. – MSC Jul 08 '15 at 07:31
  • The removeAllRanges() works really well, previously I use ony the $(".editable").blur(); and the contentEditable element still wouldn't get rid of the selection. Thanks! – Hans Tiono Mar 08 '16 at 09:25
  • Thanks for the solution! `window.getSelection().removeAllRanges();` does the trick - without it editable div is still active and next `e.codeKey == 13` returns in adding a new line. – Szymon Stepniak Mar 10 '16 at 05:43
  • This is helped when using contenteditable with draggable and ckeditor. – Abu Sulaiman Dec 05 '20 at 16:32
8

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

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

Glen Selle
  • 3,966
  • 4
  • 37
  • 59
Roman Resh
  • 165
  • 4
  • I think, technically, it should be *$('div[contentEditable="true"]').blur()* – KOGI Feb 02 '11 at 19:39
  • `div[contentEditable]` checks for the presence of the contentEditable attribute, `div[contentEditable="true"]` checks if that attribute is set to true. Either will work in most cases. You would only have to be explicit if you explicitly set contentEditable to some other value to disable it. – Paul Alexander Feb 02 '11 at 19:44
  • 1
    `div[contentEditable!="false"]` would probably be your best choice for simplicity. – zzzzBov Feb 02 '11 at 20:02
  • 1
    It would be nice if you could mark Marek Suscak's answer as a solution, since this one does not resolve the issue. Thanks in advance! – Szymon Stepniak Mar 10 '16 at 05:44
  • is not enough to blur() the element, you should unselect-it, otherwise the element even if is not focused will be receiving user input (check marek-suscak answer) – Gustavo Ulises Arias Méndez Jun 01 '16 at 21:56
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();

Omnicon
  • 314
  • 2
  • 9
0

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

halfbit
  • 3,773
  • 2
  • 34
  • 47