Я хочу запустить функцию, когда пользователь редактирует содержимое атрибута div
with contenteditable
. Что эквивалентно onchange
событию?
Я использую jQuery, поэтому любые решения, использующие jQuery, предпочтительнее. Спасибо!
javascript
jquery
html
contenteditable
Jourkey
источник
источник
document.getElementById("editor").oninput = function() { ...}
.Ответы:
Я хотел бы предложить , крепящие слушатель ключевых событий обстреляны редактируемым элементом, хотя вы должны знать , что
keydown
иkeypress
событие вызываются перед само содержанием изменяется. Это не будет охватывать все возможные средства изменения содержания: пользователь может также использовать вырезать, копировать и вставлять текст из Edit или меню контекста браузера, так что вы можете обрабатыватьcut
copy
иpaste
событие тоже. Кроме того, пользователь может удалить текст или другой контент, чтобы там было больше событий (mouseup
например). Вы можете опрашивать содержимое элемента как запасной вариант.ОБНОВЛЕНИЕ 29 октября 2014
HTML5
input
событие является ответом в долгосрочной перспективе. На момент написания он поддерживается дляcontenteditable
элементов в текущих браузерах Mozilla (из Firefox 14) и WebKit / Blink, но не в IE.Демо-версия:
Демо: http://jsfiddle.net/ch6yn/2691/
источник
cut
,copy
иpaste
событие в браузерах , которые поддерживают их (IE 5 +, Firefox 3.0+, Safari 3+, Chrome)input
событием HTML5 .Вот более эффективная версия, которая используется
on
для всех contenteditables. Это основано на лучших ответах здесь.Проект находится здесь: https://github.com/balupton/html5edit
источник
document.getElementById('editor_input').innerHTML = 'ssss'
. Недостатком является то, что требуется IE11Рассмотрите возможность использования MutationObserver . Эти наблюдатели призваны реагировать на изменения в DOM и заменять мутационные события .
Плюсы:
Минусы:
Учить больше:
источник
input
событие HTML5 (которое поддерживаетсяcontenteditable
во всех браузерах WebKit и Mozilla, которые поддерживают наблюдатели мутаций), поскольку мутация DOM может происходить как через сценарий, так и через пользовательский ввод, но это жизнеспособное решение для этих браузеров. Я думаю, что это может повредить производительности больше, чемinput
событие, но у меня нет веских доказательств этого.input
событие HTML5 возникает в каждой из этих ситуаций (в частности, перетаскивание, выделение курсивом, копирование / вырезание / вставка через контекстное меню). Я также проверил жирный шрифт w / cmd / ctrl + b и получил ожидаемые результаты. Я также проверил и смог убедиться, чтоinput
событие не запускается из-за программных изменений (что кажется очевидным, но, возможно, противоречит неясному языку на соответствующей странице MDN; см. Здесь внизу, чтобы понять, что я имею в виду: разработчик .mozilla.org / en-US / docs / Web / Events / input )Я изменил ответ Lawwantsin так, и это работает для меня. Я использую событие keyup вместо нажатия клавиши, которая прекрасно работает.
источник
не jQuery быстрый и грязный ответ:
источник
Два варианта:
1) Для современных (вечнозеленых) браузеров: событие «input» будет действовать как альтернативное событие «change».
https://developer.mozilla.org/en-US/docs/Web/Events/input
или
или (с помощью jQuery)
2) Для учета IE11 и современных (вечнозеленых) браузеров: это отслеживает изменения элементов и их содержимое внутри div.
https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver
источник
источник
Вот что сработало для меня:
источник
Эта тема была очень полезна, пока я изучал эту тему.
Я изменил часть кода, доступного здесь, в плагин jQuery, чтобы он имел форму многократного использования, в первую очередь для удовлетворения моих потребностей, но другие могут оценить более простой интерфейс для быстрого запуска с использованием тегов contenteditable.
https://gist.github.com/3410122
Обновить:
В связи с растущей популярностью плагин был принят Makesites.org
Развитие будет продолжено отсюда:
https://github.com/makesites/jquery-contenteditable
источник
Вот решение, которое я в конечном итоге использовал и работает сказочно. Вместо этого я использую $ (this) .text (), потому что я использую однострочный div, который можно редактировать. Но вы также можете использовать .html () таким образом, чтобы вам не приходилось беспокоиться о области действия глобальной / неглобальной переменной, а оператор before действительно присоединяется к редактору div.
источник
Чтобы избежать таймеров и кнопок «сохранить», вы можете использовать событие размытия, которое срабатывает, когда элемент теряет фокус. но чтобы быть уверенным, что элемент действительно был изменен (а не только сфокусирован и расфокусирован), его содержимое следует сравнить с его последней версией. или используйте событие keydown, чтобы установить некоторый «грязный» флаг для этого элемента.
источник
Простой ответ в JQuery, я только что создал этот код и подумал, что он будет полезен и для других
источник
$("div [contenteditable=true]")
будут выбраны все дочерние элементы div, прямо или косвенно, которые являются спорными.Не JQuery ответ ...
Чтобы использовать его, вызовите (скажем) элемент заголовка с id = "myHeader"
Этот элемент теперь будет редактироваться пользователем, пока он не потеряет фокус.
источник
Событие onchange не срабатывает при изменении элемента с атрибутом contentEditable, поэтому можно предложить добавить кнопку, чтобы «сохранить» издание.
Проверьте этот плагин, который обрабатывает проблему таким образом:
источник
Использование DOMCharacterDataModified в MutationEvents приведет к тому же. Тайм-аут настроен для предотвращения отправки неправильных значений (например, в Chrome у меня были некоторые проблемы с клавишей пробела)
Пример JSFIDDLE
источник
DOMCharacterDataModified
не срабатывает, когда пользователь изменяет существующий текст, например, применяя жирный шрифт или курсив.DOMSubtreeModified
более уместно в этом случае. Кроме того, люди должны помнить, что устаревшие браузеры не поддерживают эти события.Я сделал плагин JQuery, чтобы сделать это.
Вы можете просто позвонить
$('.wysiwyg').wysiwygEvt();
Вы также можете удалить / добавить события, если хотите
источник
innerHTML
дороже). Я бы порекомендовал использоватьinput
событие там, где оно существует, и прибегнуть к чему-то подобному, но с некоторым видом разоблачения.В угловых 2+
источник
Пожалуйста, следуйте следующему простому решению
In .ts:
в .html:
источник
Проверьте эту идею. http://pastie.org/1096892
Я думаю, что это близко. HTML 5 действительно должен добавить событие изменения в спецификацию. Единственная проблема заключается в том, что функция обратного вызова оценивает if (before == $ (this) .html ()) перед тем, как содержимое фактически обновляется в $ (this) .html (). setTimeout не работает, и это печально. Дайте мне знать, что вы думаете.
источник
Основываясь на ответе @ balupton:
источник