立即回应Dart的textarea变化

Question

我在我的html文件中有这个:

<textarea id="inputbox" placeholder="type here"></textarea>

连接处理程序的正确方法是什么,只要textarea的内容发生变化,它就会立即触发？(无论是通过键盘,鼠标/剪贴板,语音输入,脑波读取器等)

我试过了:

  query("#inputbox").on.change.add(handler)

但是(至少在Dartium上)它只会在你跳出场外后开火.

目的是更新"实时预览"窗口,类似于Stackoverflow在您键入时呈现Markdown输出的方式.

Answer 1

这是我迄今为止提出的最好的.如果有人知道更紧凑或更好的选择,我会很高兴听到.

编辑:代码段已更新为新模式以进行事件注册.

import 'dart:html';

void main() {
  query("#inputbox")
    ..onChange.listen(handler)
    ..onKeyDown.listen(handler)
    ..onKeyUp.listen(handler)
    ..onCut.listen(handler)
    ..onPaste.listen(handler);
}

void handler(Event event) {
  print((query("#inputbox") as TextAreaElement).value);
}

浏览器和操作系统之间的精确行为会有所不同.

您可以跳过keyDown,但请注意keyDown和keyUp行为受操作系统的影响,并不保证是对称的.您可能会想到一个更改,至少在下一个keyUp或更改事件被触发之前.事实上,我通过在Windows 7上创建一个小应用程序向Dartium和IE9发送孤立的WM_KEYDOWN消息来证明这一点.

keyPress可以用来代替keyUp和keyDown,但不会为退格和删除等某些键生成事件.

cut并paste立即对用鼠标进行的切割或粘贴做出反应.如果您不使用它们,change事件将捕获更改,但直到字段失去焦点后,有时甚至更晚.

该input事件可以取代上面的所有听众,并且似乎在Dartium中运行良好,但在IE9下它只捕获角色添加,而不是删除.

注意keyUp并且keyDown可能会为光标键,归位,结束,移位等生成其他不需要的事件(例如,在IE9中).当用户对这些操作使用快捷键时,除了剪切/粘贴侦听器之外,它还会触发.

虽然这个问题是针对Dart的,但上面的很多讨论都适用于任何侦听DOM的代码.甚至keyCode值也没有在浏览器中标准化(更详细).

检查KeyboardEventController类也是值得的,但是当我测试它时,边缘情况行为与上面提到的相似.这可能是也可能不是设计.Dart开发人员确实做了一些努力来使您免受跨浏览器的不一致,但它仍然在进行中.

在我们谈论textarea时,请记住使用它的value属性,而不是它的text属性.最后,确保你handler对键盘活动的"爆发"的反应有所限制(例如,某种计时器会暂时推迟你的处理程序的内容,并卷起同时发生的任何其他事件).

相关问题和链接:

• 处理DART中的事件
• 使用Dart语言处理键盘事件
• 你如何在Dart中听取keyUp事件？
• Dart中的跨浏览器键事件处理程序
• 跳过键盘事件并绑定到propertychange的 jQuery示例