如何使用Dart Web UI处理按键输入？

Question

我想通过Dart的Web UI声明性地在输入字段中按ENTER键进行按键操作？如果按下ENTER,我只想运行一个方法,而且我不关心任何其他键.

我该怎么做呢？

Answer 1

摘要

Dart的Web UI包可以声明性地为各种事件注册处理程序,例如click和keyUp.keyUp事件将针对每个键盘up事件触发.要过滤这些事件并仅侦听特定键,您需要查看keyCode属性.幸运的是,Dart有一个便利类,用于规范浏览器的密钥代码.您可以在声明性绑定属性中使用所有这些.继续阅读以了解具体方法!

听按键

本InputElement类有KeyUp事件,称为事件流onKeyUp(文档).的onKeyUp流发射KeyboardEvent(DOC)的实例.

final Stream<KeyboardEvent> onKeyUp;

老'n Busted

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