Jak obsługiwać naciśnięcie klawisza Enter za pomocą interfejsu internetowego Dart?

Question

Chciałbym w sposób deklaratywny wysłuchać naciśnięcia klawisza ENTER w polu wejściowym za pomocą interfejsu internetowego Dart'a? Chcę uruchomić metodę tylko wtedy, gdy naciśnięto ENTER i nie dbam o żaden inny klucz.

Jak to zrobić?

Answer 1

Podsumowanie

pakiet Web UI DART można deklaratywnie zarejestrować ładowarki do różnych wydarzeń, takich jak kliknięcia i keyUp. Zdarzenie keyUp będzie uruchamiane dla każdego zdarzenia z klawiaturą. Aby filtrować te zdarzenia i słuchać tylko określonych kluczy, należy spojrzeć na atrybut keyCode. Na szczęście, Dart ma klasę wygody dla normalizacji kodów klawiszy w różnych przeglądarkach. Możesz użyć tego wszystkiego w swoich deklaratywnych atrybutach wiązania. Czytaj dalej, aby dowiedzieć się, jak!

Nasłuchiwanie naciśnięć klawiszy

Klasa InputElement ma strumienia zdarzeń dla zdarzenia keyUp, zwany onKeyUp (docs). Strumień onKeyUp emituje instancje KeyboardEvent().

final Stream<KeyboardEvent> onKeyUp; 

Old „n Busted

KeyboardEvent zapewnia keyCode akcesor zwracającą specyficzny kod klucza systemowego. Niestety, niektóre systemy mają różne kody kluczy dla tego samego klucza semantycznego. Na szczęście Dart ma naprawę!

New Hotness

Użyj KeyEvent.wrap(KeyboardEvent parent) (doc) do emulacji KeyEvent i normalizacji mylące kodów klawiszy!

new KeyEvent.wrap(keyboardEvent) 

Teraz masz instancję KeyEvent, można wyszukać jego keyCode dla racjonalnego spojrzenia na to, co klawisz został naciśnięty. Model pobierający keyCode zwraca wartość int, ale można to porównać z listą kluczy z klasy KeyCode (doc).

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

Cross-browser naciśnięć przycisków FTW

W KeyEvent i KeyCode zajęcia pomagają normalizować kodów klawiszy w różnych systemach i przeglądarkach, więc nie trzeba się martwić o różnych niezgodności.

Z Web UI

Web UI pozwala deklaratywnie zarejestrować obsługi zdarzeń. Możesz słuchać kluczowych zdarzeń i sprawdzić, czy naciśnięto klawisz Enter. Oto przykład:

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

Wskazówki jak on-key-up rejestruje if, która wykorzystuje KeyEvent i KeyCode znormalizować kodów klawiszy.Metoda createNewTodo jest wywoływana tylko po naciśnięciu klawisza Enter.

Ta da!

Answer 2

Nie Web UI, ale jest to inny sposób na słuchanie i używanie klawiatury.

1) Posłuchaj za naciśnięciem klawisza:

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

2) Konwersja wynikowy KeyboardEvent do keyEvent pomocą KeyEvent.wrap (KeyboardEvent) konstruktora. Następnie możesz wykonać powyższe czynności, porównując KeyEvent.keyCode z KeyCode.Enter:

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