Wie man einen Tastendruck behandelt Geben Sie mit Dart Web UI ein?

Question

Ich möchte deklarativ für eine EINGABETASTE drücken in ein Eingabefeld mit Dart Web-UI tippen? Ich möchte nur eine Methode ausführen, wenn ENTER gedrückt wurde, und mir ist kein anderer Schlüssel wichtig.

Wie mache ich das?

Answer 1

Zusammenfassung

Dart Web-UI-Paket kann deklarativ Handler für verschiedene Veranstaltungen, wie klicken und keyUp registrieren. Das keyUp-Ereignis wird für jedes einzelne Keyboard-up-Ereignis ausgelöst. Um diese Ereignisse zu filtern und nur bestimmte Schlüssel anzuhören, müssen Sie sich das keyCode-Attribut ansehen. Zum Glück hat Dart eine Komfortklasse, um Keycodes über Browser hinweg zu normalisieren. Sie können all dies innerhalb Ihrer deklarativen Bindungsattribute verwenden. Lesen Sie weiter, um zu erfahren, wie!

für Tastendrücke Zuhören

Die InputElement Klasse hat einen Strom von Ereignissen für das keyUp Ereignis, genannt onKeyUp (docs). Der onKeyUp Strom sendet KeyboardEvent (doc) Instanzen.

final Stream<KeyboardEvent> onKeyUp; 

Old ‚n Busted

Die KeyboardEvent ein keyCode Accessor, die eine systemspezifische Schlüsselcode zurückgibt. Leider haben einige Systeme unterschiedliche Schlüsselcodes für denselben semantischen Schlüssel. Zum Glück hat Dart eine Lösung!

New Hotness

Verwenden Sie die KeyEvent.wrap(KeyboardEvent parent) (doc) KeyEvent und Normalisierung verwirrend Tastencodes zu emulieren!

new KeyEvent.wrap(keyboardEvent) 

Nun, da Sie eine Instanz von KeyEvent haben, können Sie seine keyCode für einen rationalen Blick in welche Taste gedrückt wurde, abfragen. Der keyCode Getter gibt eine int zurück, aber Sie können diese mit einer Liste von Schlüsseln aus der Klasse KeyCode (doc) vergleichen.

var keyEvent = new KeyEvent.wrap(keyboardEvent); 
if (keyEvent.keyCode == KeyCode.ENTER) { 
    // enter was pressed 
} 

Kreuz-Browser-Taste drückt FTW

Die KeyEvent und KeyCode Klassen helfen Schlüsselcodes über Systemen und Browsern zu normalisieren, so brauchen Sie nicht über verschiedene Inkompatibilitäten zu kümmern.

Mit Web UI

Web UI können Sie deklarativ Ereignisbehandlung registrieren. Sie können auf wichtige Ereignisse warten und prüfen, ob die Eingabetaste gedrückt wurde. Hier ein Beispiel:

<input type="text" id="new-todo" on-key-up="if (new KeyEvent($event).keyCode == KeyCode.ENTER) createNewTodo()"> 

Beachten Sie, wie on-key-up die if-Anweisung registriert, die KeyEvent und KeyCode verwendet die Tastencodes zu normalisieren.Die Methode createNewTodo wird nur aufgerufen, wenn die Eingabetaste gedrückt wurde.

Ta da!

Answer 2

Nicht Web-Benutzeroberfläche, aber dies ist eine andere Möglichkeit, Tastatureingabe zu überwachen und zu verwenden.

1) Hören für den Tastendruck:

void main() { 
    ...  
    input.onKeyPress.listen(handleKeyEvent);  
    ... 
} 

2) Konvertieren des resultierenden Keyboard auf eine KeyEvent mit dem KeyEvent.wrap (keyboard) Konstruktor. Dann können Sie tun, wie oben, indem Sie Ihren KeyEvent.keyCode mit KeyCode.Enter vergleichen:

void handleKeyEvent(KeyboardEvent event) { 
    KeyEvent keyEvent = new KeyEvent.wrap(event); 
    if (keyEvent.keyCode == KeyCode.ENTER) { 
    handleInput();  
    } 
}