ダーツWeb UIでキー入力を処理する方法は？

Question

ダーツのWeb UIを使用して、入力フィールドでENTERキーを押すと宣言的に聴きたいですか？私は、ENTERが押された場合にのみメソッドを実行したいと思います。他のキーは気にしません。

どうすればよいですか？

Answer 1

概要

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

InputElementクラスのリスニング

はonKeyUp（docs）と呼ばれるkeyUpイベントのためのイベントのストリームを、有しています。 onKeyUpストリームは、KeyboardEvent（doc）のインスタンスを生成します。

final Stream<KeyboardEvent> onKeyUp; 

オールド「N逮捕

KeyboardEventは、システム固有のキーコードを返しkeyCodeアクセサを提供します。残念なことに、一部のシステムでは、同じ意味キーのキーコードが異なります。幸いにも、ダーツには修正があります！

新暑

KeyEventをエミュレートし、混乱キーコードを正規化するKeyEvent.wrap(KeyboardEvent parent)（doc）を使用してください！

new KeyEvent.wrap(keyboardEvent) 

今、あなたはKeyEventのインスタンスを持っていることを、あなたはキーが押されたものへの合理的な外観のためにそのkeyCodeを照会することができます。 keyCodeゲッターはintを返しますが、KeyCode（doc）クラスのキーのリストと比較できます。

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

クロスブラウザキーの押下FTW

KeyEventとKeyCodeのクラスでは、さまざまな非互換性を心配する必要はありませんので、システムやブラウザ間でキーコードを正常化するのに役立ちます。ウェブUIで

のWeb UIを使用すると、宣言的イベント処理を登録することができます。キーイベントをリッスンし、Enterキーが押されたかどうかを確認できます。 on-key-upは、キーコードを正規化するKeyEventとKeyCodeを使用してif文を登録する方法

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

注意：ここでは一例です。createNewTodoメソッドは、Enterキーが押されたときにのみ呼び出されます。

Ta da！

Answer 2

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

1）キーを押しをリッスン：

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

2）KeyEvent.wrap（れるKeyboardEvent）コンストラクタを使用したKeyEventに得られるれるKeyboardEventを変換。次に、KeyEvent.keyCodeとKeyCodeを比較することで上記のようにすることができます。

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