Как я могу размыть div, где contentEditable = true?

Question

Как я могу размыть / сфокусировать div, где contentEditable = true ?Я пытался $(elm).blur() и $(elm).attr('contentEditable', false);

Answer 1

Я бы добавил другое решение, основанное на правильном ответе Omnicon.Я раздвоил его скрипку и обновил ее .

Хитрость заключается в том, чтобы удалить все диапазоны после вызова размытия:

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

Answer 2

$("div[contentEditable]").blur() для размытия всех элементов contentEditable.

$("#elementId").blur() для размытия элемента на id.

Answer 3

Предлагаемое решение Романа Реша не работает, когда вы нажимаете на элемент и сразу после этого нажимаете клавишу ввода.Это не размывает, но создает разрывы / деления строк.

Можно полностью предотвратить это поведение.

Посмотреть эту скрипку

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

Answer 4

При добавлении ко всем ответам, когда используете что-то вроде

$(".editable").blur()

, подумайте о размытии только сфокусированного, например

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

Если нет, иногда вы можете получить хорошие пробники