2013-01-21 7 views
5

Ich habe dies in meinem HTML-Datei bekam:reagieren sofort auf TextArea- Änderungen in Dart

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

Was ist der richtige Weg, um einen Handler zu verdrahten, die sofort, wenn der Inhalt der Textbereich Veränderungen ausgelöst wird? (Ob durch Tastatur, Maus/Zwischenablage, Spracheingabe, brainwave Leser usw.)

Ich habe versucht:

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

aber (zumindest auf Dartium) nur ausgelöst wird, nachdem Sie mit der Tabulatortaste aus dem Feld.

Der Zweck besteht darin, ein "Live-Vorschau" -Fenster zu aktualisieren, ähnlich wie Stackoverflow die Markdown-Ausgabe während der Eingabe ausgibt.

Antwort

8

Das ist das Beste, was ich bisher gemacht habe. Ich würde mich freuen zu hören, ob jemand eine kompaktere oder bessere Alternative kennt.

Bearbeiten: Code-Snippet auf die new pattern für Ereignisregistrierung aktualisiert.

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); 
} 

Das genaue Verhalten wird zwischen Browsern und Betriebssystemen variieren.

Sie könnten keyDown, überspringen aber keyDown und keyUp Verhalten durch das Betriebssystem beeinflusst und isn't guaranteed to be symmetric bewusst sein. Sie könnten möglicherweise eine Änderung vermissen, zumindest bis zum nächsten keyUp oder Änderung Ereignis wird ausgelöst. In der Tat habe ich dies bewiesen, indem ich eine kleine App auf Windows 7 erstellt habe, um eine verwaiste WM_KEYDOWN-Nachricht an Dartium und IE9 zu senden.

keyPress könnte statt keyUp und keyDown, aber won't generate events für bestimmte Tasten wie Backspace und löschen verwendet werden.

und paste reagieren sofort auf einen Schnitt oder eine Paste durchgeführt mit der Maus. Wenn Sie sie nicht verwenden, erfasst das Ereignis change die Änderung, jedoch erst, nachdem das Feld den Fokus verloren hat, oder sometimes even later.

Das Ereignis input könnte alle oben genannten Listener ersetzen und scheint in Dartium gut zu funktionieren, aber unter IE9 erfasst es nur Zeichenergänzungen, nicht Entfernungen.

Hinweis keyUp und keyDown können zusätzliche unerwünschte Ereignisse für Cursortasten, Home, Ende, Schicht usw. (z. B. In IE9) generieren. Es wird zusätzlich zu den Ausschneiden/Einfügen-Listenern ausgelöst, wenn der Benutzer Tastenkombinationen für diese Aktionen verwendet.

Während die Frage speziell für Dart gilt, gelten viele der obigen Ausführungen für jeden Code, der dem DOM zuhört. Sogar keyCode Werte aren't standardized über Browser (more detail).

Es kann sich auch lohnen, die Klasse KeyboardEventController auszuprobieren, obwohl das Kantenverhalten im Großen und Ganzen bei der Prüfung ähnlich dem oben genannten war. Das kann oder darf nicht beabsichtigt sein.Die Dart-Entwickler bemühen sich über browserübergreifende Inkonsistenzen, insulate you zu erstellen, aber es ist immer noch in Arbeit.

Auch während wir über TextArea- sprechen, erinnern seine value Eigenschaft zu verwenden, not its text property. Schließlich, stellen Sie sicher, dass Ihre handler ihre Reaktionen auf "Bursts" der Tastaturaktivität drosselt (z. B. eine Art Timer, der kurzzeitig die Eingeweide Ihres Handlers verstellt und zusätzliche Ereignisse zusammenruft, die in der Zwischenzeit auftreten).

Verwandte Fragen und Links:

2

Es ist nicht klar, ob Sie Polymer verwenden oder nicht, aber wenn Sie es sind, können Sie eine Änderung an einer mit @observable annotierten Variable abonnieren, indem Sie eine Funktion im Polymerelement in der Form [Variablenname] Geändert (Altwert) erstellen). Ich habe das ursprünglich hier gefunden: How to subscribe to change of an observable field

Verwandte Themen