如何在Dart Web UI中处理按键Enter？

Question

如何在Dart Web UI中处理按键Enter？

dart

6

我希望使用Dart的Web UI，在输入框中声明性地监听ENTER键按下事件。我只想在按下ENTER键时运行一个方法，而不关心其他任何键。

我该怎么做？

- Seth Ladd

2个回答

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

- hkhamm

使用Dart VM版本1.13.2，KeyboardEvent现在有一个keyCode getter。不再需要包装。 - TastyCatFood

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Seth Ladd · Accepted Answer

摘要

Dart的Web UI包可以声明性地注册各种事件处理程序，例如click和keyUp等。 keyUp事件将为每个键盘抬起事件触发。为了过滤这些事件，并仅侦听特定键，您需要查看keyCode属性。幸运的是，Dart具有用于规范化浏览器中键代码的方便类。您可以在声明性绑定属性中使用所有这些内容。继续阅读以了解更多！

监听按键

InputElement类具有用于keyUp事件的事件流，称为onKeyUp (docs) 。onKeyUp流会发出KeyboardEvent (doc)实例。

final Stream<KeyboardEvent> onKeyUp;

老式的办法

KeyboardEvent 提供了 keyCode 访问器，返回系统特定的按键代码。不幸的是，某些系统对于相同语义按键有不同的按键代码。幸运的是，Dart 有解决方法！

新潮的做法

使用 KeyEvent.wrap(KeyboardEvent parent) (doc) 模拟 KeyEvent 并且规范混淆的按键代码！

new KeyEvent.wrap(keyboardEvent)

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

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语句，该语句使用KeyEvent和KeyCode来规范化键码。只有在按下回车键时才会调用createNewTodo方法。

Ta da！