Chcę uruchomić funkcję, gdy użytkownik edytuje zawartość atrybutu div
with contenteditable
. Jaki jest odpowiednik onchange
wydarzenia?
Korzystam z jQuery, więc preferowane są wszelkie rozwiązania korzystające z jQuery. Dzięki!
javascript
jquery
html
contenteditable
Jourkey
źródło
źródło
document.getElementById("editor").oninput = function() { ...}
.Odpowiedzi:
Sugeruję dołączanie słuchaczy do kluczowych zdarzeń uruchamianych przez element edytowalny, choć musisz pamiętać, że
keydown
ikeypress
zdarzenia są uruchamiane przed zmianą samej treści. Nie obejmie to wszystkich możliwych sposobów zmiany treści: użytkownik może również używać wycinania, kopiowania i wklejania z menu Edycja lub menu przeglądarki kontekstowej, więc możesz również obsłużyć zdarzeniacut
copy
ipaste
. Ponadto użytkownik może upuścić tekst lub inną treść, więc jest tam więcej zdarzeń (mouseup
na przykład). Możesz sondować zawartość elementu jako awaryjne.AKTUALIZACJA 29 października 2014 r
HTML5
input
zdarzenie jest odpowiedzią na dłuższą metę. W chwili pisania tego tekstu jest on obsługiwany wcontenteditable
elementach obecnych przeglądarek Mozilla (od Firefox 14) i WebKit / Blink, ale nie w IE.Próbny:
Demo: http://jsfiddle.net/ch6yn/2691/
źródło
cut
,copy
apaste
wydarzenia w przeglądarkach, które je obsługują (IE 5+, Firefox 3.0+, Safari 3+, Chrome)input
zdarzeniem HTML5 .Oto bardziej wydajna wersja
on
dla wszystkich edytowanych treści. Opiera się na najlepszych odpowiedziach tutaj.Projekt jest tutaj: https://github.com/balupton/html5edit
źródło
document.getElementById('editor_input').innerHTML = 'ssss'
. Wadą jest to, że wymaga IE11Rozważ użycie MutationObserver . Ci obserwatorzy mają za zadanie reagować na zmiany w DOM i zastępować zdarzenia mutacji .
Plusy:
Cons:
Ucz się więcej:
źródło
input
zdarzenie HTML5 (które jest obsługiwanecontenteditable
we wszystkich przeglądarkach WebKit i Mozilla, które obsługują obserwacje mutacji), ponieważ mutacja DOM może wystąpić zarówno za pomocą skryptu, jak i danych wejściowych użytkownika, ale jest realnym rozwiązaniem dla tych przeglądarek. Wyobrażam sobie, że może to bardziej zaszkodzić wydajności niż samoinput
wydarzenie, ale nie mam na to twardych dowodów.input
zdarzenie HTML5 jest uruchamiane w każdej z tych sytuacji (w szczególności przeciąganie i upuszczanie, kursywa, kopiowanie / wycinanie / wklejanie za pomocą menu kontekstowego). Przetestowałem również pogrubienie w / cmd / ctrl + b i uzyskałem oczekiwane wyniki. Sprawdziłem również i byłem w stanie sprawdzić, czyinput
zdarzenie nie uruchamia się przy zmianach programowych (co wydaje się oczywiste, ale prawdopodobnie jest sprzeczne z jakimś mylącym językiem na odpowiedniej stronie MDN; zobacz dół strony tutaj, aby zobaczyć, co mam na myśli: programista .mozilla.org / en-US / docs / Web / Events / input )Zmodyfikowałem odpowiedź prawnika w ten sposób i to działa dla mnie. Używam zdarzenia keyup zamiast naciśnięcia klawisza, co działa świetnie.
źródło
szybka i brudna odpowiedź non jQuery :
źródło
Dwie opcje:
1) W przypadku nowoczesnych (wiecznie zielonych) przeglądarek: zdarzenie „wejściowe” działałoby jako alternatywne zdarzenie „zmiany”.
https://developer.mozilla.org/en-US/docs/Web/Events/input
lub
lub (z jQuery)
2) Aby uwzględnić IE11 i nowoczesne (wiecznie zielone) przeglądarki: Obserwuje zmiany elementów i ich zawartość w div.
https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver
źródło
źródło
Oto, co zadziałało dla mnie:
źródło
Ten wątek był bardzo pomocny podczas badania tematu.
Zmodyfikowałem część kodu dostępnego tutaj w wtyczce jQuery, więc jest w formie wielokrotnego użytku, przede wszystkim w celu zaspokojenia moich potrzeb, ale inni mogą docenić prostszy interfejs do uruchamiania za pomocą tagów, które można zadowolić.
https://gist.github.com/3410122
Aktualizacja:
Ze względu na rosnącą popularność wtyczka została przyjęta przez Makesites.org
Rozwój będzie kontynuowany stąd:
https://github.com/makesites/jquery-contentiable
źródło
Oto rozwiązanie, z którego korzystałem i działa bajecznie. Zamiast tego używam $ (this) .text (), ponieważ po prostu używam div jednowierszowego, który można edytować treści. Ale możesz także użyć .html () w ten sposób, że nie musisz się martwić o zakres globalnej / nieglobalnej zmiennej, a wcześniejsza wersja faktycznie jest dołączona do edytora div.
źródło
Aby uniknąć liczników czasu i przycisków „zapisz”, możesz użyć zdarzenia rozmycia, które uruchamia się, gdy element traci fokus. ale aby mieć pewność, że element został faktycznie zmieniony (nie tylko skupiony i nieostry), jego zawartość należy porównać z jego ostatnią wersją. lub użyj zdarzenia keydown, aby ustawić flagę „brudną” dla tego elementu.
źródło
Prosta odpowiedź w JQuery, właśnie stworzyłem ten kod i pomyślałem, że będzie on pomocny także dla innych
źródło
$("div [contenteditable=true]")
wybierze wszystkie dzieci div, bezpośrednio lub pośrednio, które są zadowolone.Odpowiedź nie JQuery ...
Aby go użyć, wywołaj (powiedzmy) element nagłówka o id = "myHeader"
Ten element będzie teraz edytowalny przez użytkownika, dopóki nie straci ostrości.
źródło
Zdarzenie onchange nie jest uruchamiane po zmianie elementu z atrybutem contentEditable. Sugerowanym podejściem może być dodanie przycisku w celu „zapisania” edycji.
Sprawdź tę wtyczkę, która rozwiązuje problem w ten sposób:
źródło
Użycie DOMCharacterDataModified pod MutationEvents doprowadzi do tego samego. Limit czasu jest skonfigurowany, aby zapobiec wysyłaniu niepoprawnych wartości (np. W Chrome miałem problemy z klawiszem spacji)
Przykład JSFIDDLE
źródło
DOMCharacterDataModified
nie będzie uruchamiany, gdy użytkownik zmodyfikuje istniejący tekst, na przykład stosując pogrubienie lub kursywę.DOMSubtreeModified
jest bardziej odpowiednie w tym przypadku. Ludzie powinni także pamiętać, że starsze przeglądarki nie obsługują tych zdarzeń.W tym celu zbudowałem wtyczkę jQuery.
Możesz po prostu zadzwonić
$('.wysiwyg').wysiwygEvt();
Możesz także usunąć / dodać wydarzenia, jeśli chcesz
źródło
innerHTML
jest droga). Poleciłbym wykorzystaćinput
wydarzenie tam, gdzie ono istnieje i powrócić do czegoś takiego, ale z pewnym zapowiedziami.W Angular 2+
źródło
Postępuj zgodnie z następującym prostym rozwiązaniem
W .ts:
w .html:
źródło
Sprawdź ten pomysł. http://pastie.org/1096892
Myślę, że jest blisko. HTML 5 naprawdę musi dodać zdarzenie zmiany do specyfikacji. Jedynym problemem jest to, że funkcja zwrotna ocenia, czy (przed == $ (this) .html ()) przed faktyczną aktualizacją treści w $ (this) .html (). setTimeout nie działa i to smutne. Powiedz mi co myślisz.
źródło
Na podstawie odpowiedzi @ balupton:
źródło