6

Dart の Web UI を使用して、入力フィールドでの ENTER キーの押下を宣言的にリッスンしたいですか? Enter キーが押された場合にのみメソッドを実行したいので、他のキーは気にしません。

どうすればいいですか？

4

2 に答える 2

18

概要

Dart の Web UI パッケージは、クリックや keyUp などのさまざまなイベントのハンドラーを宣言的に登録できます。keyUp イベントは、キーボード アップ イベントごとに発生します。これらのイベントをフィルタリングし、特定のキーのみをリッスンするには、keyCode 属性を確認する必要があります。幸いなことに、Dart には、ブラウザ間でキーコードを正規化するための便利なクラスがあります。これらすべてを宣言的なバインド属性内で使用できます。方法を学ぶために読んでください！

キーの押下をリッスンする

このInputElementクラスには、keyUp イベントのイベント ストリームonKeyUp( docs ) があります。onKeyUpストリームは( KeyboardEventdoc )インスタンスを発行します。

final Stream<KeyboardEvent> onKeyUp;

オールド・アンド・バステッド

は、システム固有のキー コードを返すアクセサをKeyboardEvent提供します。keyCode残念ながら、一部のシステムでは、同じセマンティック キーに対して異なるキー コードが使用されています。幸いなことに、Dart には修正があります。

新しい辛さ

KeyEvent.wrap(KeyboardEvent parent)( doc ) を使用して、KeyEvent紛らわしいキーコードをエミュレートおよび正規化してください!

new KeyEvent.wrap(keyboardEvent)

のインスタンスができたので、どのキーが押されたかを合理的に調べるためにKeyEventクエリを実行できます。ゲッターは を返しますが、keyCodeそれを( doc ) クラスのキーのリストと比較できます。keyCodeintKeyCode

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

クロスブラウザキープレス FTW

KeyEventおよびクラスはKeyCode、システムやブラウザ間でキー コードを正規化するのに役立つため、さまざまな非互換性について心配する必要はありません。

Web UIあり

Web UI では、イベント処理を宣言的に登録できます。キー イベントをリッスンして、Enter キーが押されたかどうかを確認できます。次に例を示します。

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

キー コードを正規化するためにおよびon-key-upを使用する if ステートメントを登録する方法に注意してください。このメソッドは、Enter キーが押されたときにのみ呼び出されます。KeyEventKeyCodecreateNewTodo

タダ！

于 2013-02-09T20:58:44.593 に答える
6

Web UI ではありませんが、これはキーボード入力をリッスンして使用する別の方法です。

1) キーを押す音を聞きます:

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

2) KeyEvent.wrap(keyboardEvent)コンストラクターを使用して、結果の KeyboardEvent を KeyEvent に変換します。次に、KeyEvent.keyCode と KeyCode.Enter を比較して、上記のようにすることができます。

void handleKeyEvent(KeyboardEvent event) {
  KeyEvent keyEvent = new KeyEvent.wrap(event);
  if (keyEvent.keyCode == KeyCode.ENTER) {
    handleInput();       
  }   
}
于 2013-12-20T18:13:59.740 に答える