立即响应DART中的textarea更改 [英] Respond immediately to textarea changes in Dart

查看：134 发布时间：2017/3/11 22:08:21 events textarea dart

本文介绍了立即响应DART中的textarea更改的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我的html文件中有这个：

I've got this in my html file:

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

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

What's the correct way to wire up a handler that will fire immediately whenever the content of the textarea changes? (whether by keyboard, mouse/clipboard, speech input, brainwave reader, etc)

我试过：

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

$ b

but (at least on Dartium) it only fires after you tab out of the field.

目的是更新一个实时预览窗口，类似于实时预览窗口，但是（至少在Dartium上）在你输入时Stackoverflow渲染Markdown输出。

The purpose is to update a "live preview" window, similar to the way Stackoverflow renders Markdown output while you type.

推荐答案

这是我到目前为止最好的。如果有人知道更紧凑或更好的替代方案，我会很高兴。

This is the best I came up with so far. I'd be happy to hear if anyone knows of a more compact or preferable alternative.

编辑：代码段更新为新模式用于事件注册。

Code snippet updated to the new pattern for event registration.

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

精确的行为会因浏览器和操作系统而异。

The precise behavior will vary between browsers and operating systems.

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

You could skip keyDown, but be aware keyDown and keyUp behavior is influenced by the OS and isn't guaranteed to be symmetric. You might conceivably miss a change, at least until the next keyUp or change event gets fired. Indeed I proved this out by creating a little app on Windows 7 to send an orphan WM_KEYDOWN message to Dartium and IE9.

keyPress 可代替 keyUp 和 keyDown ，但将不会为特定键（如退格和删除）生成事件。

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

cut and paste react immediately to a cut or paste performed with the mouse. If you don't use them, the change event will capture the change, but not until after the field loses focus, or sometimes even later.

输入事件可以替换所有上面的监听器，似乎在Dartium中工作的很好，但在IE9下它只捕获字符添加，而不是删除。

The input event could replace all listeners above and seems to work great in Dartium, but under IE9 it only captures character additions, not removals.

注意 keyUp 和 keyDown 可能会为光标键，首页，结束，移位等产生其他不需要的事件（例如在IE9中）。

Note keyUp and keyDown may generate additional unwanted events for cursor keys, home, end, shift, etc. (e.g. In IE9). It will fire in addition to the cut/paste listeners when the user uses shortcut keys for those actions.

虽然这个问题是针对Dart的，但很多上面的讨论适用于侦听DOM的任何代码。即使 keyCode 值不是跨浏览器标准化（详情）。

While the question is specific to Dart, a lot of the discussion above applies to any code listening to the DOM. Even keyCode values aren't standardized across browsers (more detail).

也可以检查 KeyboardEventController 类，但总的来说当我测试它的边缘情况行为类似于上面提到的。这可能是也可能不是设计。 Dart开发人员做一些努力来为你绝缘

It may also be worthwhile checking out the KeyboardEventController class, though by and large when I tested it the edge case behavior was similar to that noted above. That may or may not be by design. The Dart developers do make some effort to insulate you from cross-browser inconsistencies, but it's still a work in progress.

当我们谈论 textarea 时，记得使用 value 属性，不是其文本属性。最后，请确保您的处理程序限制其对键盘活动的突发的反应（例如某种定时器短暂地延迟处理程序的内容，并卷起任何其他事件

Also while we're talking about textarea, remember to use its value property, not its text property. Finally, be sure your handler throttles its reactions to "bursts" of keyboard activity (e.g. some sort of timer that briefly defers the guts of your handler and rolls up any additional events which occur in the meantime).

相关问题和链接：