回答
摘要
飛鏢的Web UI包可以聲明登記處理各種事件,如點擊和KeyUp。 keyUp事件將觸發每個鍵盤上的事件。要過濾這些事件並僅偵聽特定的鍵,您需要查看keyCode屬性。幸運的是,Dart有一個便利的類來對各個瀏覽器中的鍵碼進行規範化處理。你可以在你的聲明性綁定屬性中使用所有這些。閱讀以瞭解如何!
監聽按鍵
的InputElement
類有KeyUp事件事件流,稱爲onKeyUp
(docs)。 onKeyUp
流發出KeyboardEvent
(doc)實例。
final Stream<KeyboardEvent> onKeyUp;
舊「N猛擊
的KeyboardEvent
提供keyCode
訪問,它返回一個系統特定鍵碼。不幸的是,一些系統對於相同的語義密鑰具有不同的密鑰代碼。幸運的是,Dart有一個解決方案!
新的辣味
使用KeyEvent.wrap(KeyboardEvent parent)
(doc)來模擬KeyEvent
和規範混亂的關鍵代碼!
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
類幫助正常化跨系統和跨瀏覽器的鍵碼,所以你不必擔心各種不兼容。
隨着Web UI
的Web UI可以讓你註冊聲明的事件處理。您可以監聽關鍵事件並檢查是否按下了回車鍵。這裏有一個例子:
<input type="text" id="new-todo" on-key-up="if (new KeyEvent($event).keyCode == KeyCode.ENTER) createNewTodo()">
注意如何on-key-up
註冊if語句,它使用KeyEvent
和KeyCode
正常化的關鍵代碼。只有在按下回車鍵時纔會調用createNewTodo
方法。
大達!
不是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();
}
}
隨着Dart VM版本:1.13.2,KeyboardEvent現在有一個keyCode獲取器。不需要更多的包裝。 – TastyCatFood 2016-01-30 12:43:47
這是非常有用的模式。 – 2013-02-10 01:15:40
這有點冗長,imo,但它似乎工作。 :) – 2013-02-10 06:55:35
我很樂意說按鍵輸入。所以我打開:https://github.com/dart-lang/web-ui/issues/357 – 2013-02-10 06:58:20