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

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


javascript jquery javascript-events
person Babiker    schedule 02.02.2011    source источник

Ответы (4)


arrow_upward
8
arrow_downward

$("div[contentEditable]").blur(), чтобы размыть все элементы contentEditable.

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

person Roman Resh    schedule 02.02.2011
comment
Думаю, технически это должно быть $('div[contentEditable=true]').blur() - person KOGI; 02.02.2011
comment
div[contentEditable] проверяет наличие атрибута contentEditable, div[contentEditable="true"] проверяет, установлено ли для этого атрибута значение true. Либо будет работать в большинстве случаев. Вы должны быть явными только в том случае, если вы явно установили для contentEditable какое-то другое значение, чтобы отключить его. - person Paul Alexander; 02.02.2011
comment
div[contentEditable!="false"], вероятно, будет вашим лучшим выбором для простоты. - person zzzzBov; 02.02.2011
comment
Было бы неплохо, если бы вы могли отметить ответ Марека Сускака как решение, поскольку этот вопрос не решает проблему. Заранее спасибо! - person Szymon Stepniak; 10.03.2016
comment
недостаточно размыть () элемент, вы должны отменить выбор, иначе элемент, даже если он не сфокусирован, будет получать пользовательский ввод (проверьте ответ marek-suscak) - person Gustavo Ulises Arias Méndez; 02.06.2016

arrow_upward
37
arrow_downward

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

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

$(".editable").blur();
window.getSelection().removeAllRanges();
person Marek Suscak    schedule 12.11.2014
comment
Это сработало для меня, спасибо. Omnicon у меня не работал, отчасти потому, что при вызове он прокручивал весь документ вниз. - person MSC; 08.07.2015
comment
Метод removeAllRanges() работает очень хорошо, ранее я использовал только $(.editable).blur(); и элемент contentEditable по-прежнему не избавится от выделения. Спасибо! - person Hans Tiono; 08.03.2016
comment
Спасибо за решение! window.getSelection().removeAllRanges(); делает свое дело - без него редактируемый div все еще активен, а следующий e.codeKey == 13 возвращается при добавлении новой строки. - person Szymon Stepniak; 10.03.2016
comment
Это помогает при использовании contenteditable с draggable и ckeditor. - person Abu Sulaiman; 05.12.2020

arrow_upward
3
arrow_downward

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

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

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

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

person Omnicon    schedule 29.10.2014

arrow_upward
0
arrow_downward

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

$(".editable").blur()

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

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

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

person halfbit    schedule 05.06.2016