Question

我的html文件中有这个：

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

当textarea的内容发生变化时，连接处理程序的正确方法是什么？（无论是通过键盘，鼠标/剪贴板，语音输入，脑波读取器等）

我试过了：

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

但是（至少在Dartium上）它只会在您跳出该字段后触发。

目的是更新“实时预览”窗口，类似于Stackoverflow在您键入时呈现Markdown输出的方式。

Answer 1

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

修改：代码段更新为new pattern以进行活动注册。

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 行为会受到操作系统和isn't guaranteed to be symmetric的影响。您可能会错过任何更改，至少在下一个 keyUp 或更改事件被触发之前。事实上，我通过在Windows 7上创建一个小应用程序来向Dartium和IE9发送孤立的WM_KEYDOWN消息来证明这一点。

可以使用

keyPress代替 keyUp 和 keyDown ，但won't generate events可用于某些键，例如退格和删除。

cut和paste会立即对使用鼠标执行的剪切或粘贴做出反应。如果您不使用它们，change事件将捕获更改，但不会在字段失去焦点之后或sometimes even later。

input事件可以替换上面的所有侦听器，并且似乎在Dartium中运行良好，但在IE9下它只捕获字符添加，而不是删除。

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

虽然问题是针对Dart的，但上面的很多讨论都适用于任何侦听DOM的代码。浏览器中的 keyCode 值aren't standardized（more detail）。

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

同样在我们谈论 textarea 时，请记住使用其value属性not its text property。最后，请确保您的handler限制其对键盘活动“爆发”的反应（例如，某种计时器会暂时推迟处理程序的内容并卷起同时发生的任何其他事件。）

相关问题和链接：

Answer 2

目前尚不清楚你是否使用聚合物，但如果你是，你可以通过在[变量名]改变的形式聚合物元素中创建一个函数来订阅对使用@observable注释的变量的更改（ OLDVALUE）。我最初在这里找到了这个：How to subscribe to change of an observable field

立即回应Dart的textarea变化

2 个答案: