Odpowiadać natychmiast na zmiany textarea w Dart

Question

Mam to w moim pliku html:

<textarea id="inputbox" placeholder="type here"></textarea> 

Co znajduje się w poprawny sposób podłączyć się do obsługi, który będzie ogień natychmiast, gdy treść zmian textarea? (Niezależnie od klawiatury, myszy/schowka, wejście mowy, czytnik fal mózgowych, etc)

Próbowałem:

query("#inputbox").on.change.add(handler) 

ale (przynajmniej na Dartium) to tylko pożary po zakładka z pola.

Celem jest aktualizacja okna podglądu na żywo, podobnie do sposobu, w jaki Stackoverflow renderuje wynik Markdown podczas pisania.

Answer 1

To jest najlepsze, co wymyśliłem do tej pory. Byłbym szczęśliwy, gdyby dowiedziałem się o bardziej kompaktowej lub preferowanej alternatywie.

Edytuj: Fragment kodu został zaktualizowany do new pattern w celu rejestracji wydarzenia.

import 'dart:html'; 

void main() { 
    query("#inputbox") 
    ..onChange.listen(handler) 
    ..onKeyDown.listen(handler) 
    ..onKeyUp.listen(handler) 
    ..onCut.listen(handler) 
    ..onPaste.listen(handler); 
} 

void handler(Event event) { 
    print((query("#inputbox") as TextAreaElement).value); 
} 

Dokładna zachowanie będzie się różnić między przeglądarkami i systemami operacyjnymi.

Można pominąć keyDown, ale należy pamiętać keyDown i keyUp zachowanie zależy od systemu operacyjnego i isn't guaranteed to be symmetric. Możliwe, że przegapisz jakąś zmianę, przynajmniej do momentu, kiedy następne wydarzenie zostanie zmienione na keyUp lub . Rzeczywiście udowodniłem to, tworząc małą aplikację na Windows 7, aby wysłać sierocą wiadomość WM_KEYDOWN do Dartium i IE9.

keyPress może być stosowany zamiast keyUp i keyDownwon't generate events, ale dla niektórych klawiszy jak backspace i delete.

cut i paste natychmiast reagują na przecięcie lub wklejanie wykonane za pomocą myszy. Jeśli ich nie użyjesz, zdarzenie change zarejestruje zmianę, ale dopiero po utracie ostrości pola lub sometimes even later.

Zdarzenie input może zastąpić wszystkie powyższe detektory i wydaje się działać świetnie w Dartium, ale w IE9 przechwytuje tylko dodatki do postaci, a nie usuwa.

Uwaga keyUp i keyDown może generować dodatkowe niepożądane zdarzenia dla klawiszy kursora, domu, końca, przesunięcia itp. (Np. W IE9). Oprócz wykrywaczy wytnij/wklej zostanie uruchomiony, gdy użytkownik użyje klawiszy skrótów dla tych działań.

Podczas gdy pytanie jest specyficzne dla Dart, wiele powyższych dyskusji dotyczy dowolnego kodu słuchającego DOM. Nawet keyCode wartości aren't standardized w różnych przeglądarkach (more detail).

Warto również sprawdzić klasę KeyboardEventController, ale ogólnie rzecz biorąc, podczas jej testowania zachowanie w przypadku krawędzi było podobne do opisanego powyżej. To może lub nie być zgodne z projektem.Programiści Dart dokładają wszelkich starań, aby insulate you z niespójności między przeglądarkami, ale wciąż jest to praca w toku.

Również podczas gdy mówimy o textarea, należy pamiętać, aby używać jej value własność, not its text property. Na koniec upewnij się, że Twój numer handler tłumi reakcje na "wybuchy" aktywności klawiatury (np. Jakiś zegar, który krótko odrzuca żyłki twojego tresera i zwija wszystkie dodatkowe zdarzenia, które miały miejsce w międzyczasie).

Podobne pytania i linki:

• Handle events in DART
• Handling Keyboard events in Dart Language
• How do you listen for a keyUp event in Dart?
• Cross browser key event handler in Dart
• jQuery example that skips keyboard events and binds to propertychange

Answer 2

Nie jest jasne, czy używasz polimeru, czy nie, ale jeśli tak, możesz zapisać się do zmiennej oznaczonej przez @observable, tworząc funkcję w elemencie polimerowym w postaci jako [nazwa zmiennej] Zmieniono (oldvalue). Pierwotnie znalazłem to tutaj: How to subscribe to change of an observable field