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

Question

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

Answer 1

$("div[contentEditable]").blur() чтобы размыть все содержимое.

$("#elementId").blur() чтобы размыть элемент по его id.

Answer 2

Предлагаемое решение Roman Resh не работает, когда вы нажимаете на элемент и сразу же вводите его. Он не будет размываться, но создает разрывы строк/div.

Этого можно полностью предотвратить.

See this fiddle

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

Answer 3

Я хотел бы добавить еще одно решение, основанное на ответ OMNICON, который является правильным BTW. У меня есть forked his fiddle and updated it.

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

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

Answer 4

прилагая для ответов на все вопросы, когда, используя нечто вроде

$(".editable").blur() 

думать о размытости только сосредоточенным, как

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

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