6

我想使用 Dart 的 Web UI 以声明方式在输入字段中侦听 ENTER 按键？如果按下 ENTER，我只想运行一个方法，我不关心任何其他键。

我该怎么做呢？

4

2 回答 2

18

概括

Dart 的 Web UI 包可以声明式地注册各种事件的处理程序，例如 click 和 keyUp。keyUp 事件将为每个键盘向上事件触发。要过滤这些事件并仅监听特定键，您需要查看 keyCode 属性。幸运的是，Dart 有一个方便的类来规范跨浏览器的键码。您可以在声明性绑定属性中使用所有这些。继续阅读以了解如何操作！

监听按键

该类InputElement有一个 keyUp 事件的事件流，称为onKeyUp( docs )。流onKeyUp发出KeyboardEvent( doc ) 实例。

final Stream<KeyboardEvent> onKeyUp;

旧的'n Busted

KeyboardEvent提供keyCode返回系统特定键码的访问器。不幸的是，一些系统对于相同的语义键有不同的键码。幸运的是，Dart 有一个修复方法！

新热点

使用KeyEvent.wrap(KeyboardEvent parent)( doc ) 来模拟KeyEvent和规范令人困惑的关键代码！

new KeyEvent.wrap(keyboardEvent)

现在您有了 的实例KeyEvent，您可以查询它keyCode以合理地查看按下的键。keyCodegetter 返回一个，但您可以将其int与KeyCode( doc ) 类中的键列表进行比较。

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

跨浏览器按键 FTW

KeyEvent和类有助于规范跨系统和浏览器的KeyCode关键代码，因此您无需担心各种不兼容问题。

使用网页界面

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方法仅在按下回车键时调用。

达达！

于 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 回答