如何處理按鍵輸入Dart Web UI？

Question

我想通過Dart的Web UI聲明式地在輸入字段中按ENTER按鍵？如果按下ENTER鍵，我只想運行一個方法，並且我不關心任何其他鍵。

我該怎麼做？

Answer 1

摘要

飛鏢的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方法。

大達！

Answer 2

不是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();  
    } 
}