立即回应Dart的文字变更 [英] Respond immediately to textarea changes in Dart

问题描述

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

 < textarea id =inputboxplaceholder = >< / textarea的> 
  

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

我试过：

  query（＃inputbox）。on.change.add（handler）
  

但（至少在Dartium上），它只会在您从该字段开始之后触发。

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

解决方案

这是迄今为止最好的。编辑：代码片段更新为新模式进行事件注册。

  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 和粘贴立即对鼠标执行剪切或粘贴进行反应。如果您不使用它们，则更改事件将捕获更改，但直到字段失去焦点或有时甚至更晚。

输入事件可以替换以上所有的听众，在Dartium上似乎都很出色，但在IE9下它只能捕获字符的添加，而不是删除。

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

虽然问题是Dart特有的，但上面的讨论很多适用于任何侦听DOM的代码。即使 keyCode 值跨浏览器不标准化（< a href =http://www.quirksmode.org/dom/events/keys.html =nofollow noreferrer>更多细节）。

尽管如此，也可能需要检查 KeyboardEventController 类当我测试它时，边缘案例行为与上述相似。这可能是也可能不是设计的。 Dart开发人员做了一些努力，绝缘你跨浏览器不一致，但它仍然是一个正在进行的工作。

同时我们在谈论 textarea 时，请记住使用它值属性，不是其 text 属性。最后，请确保您的处理程序阻止其对活动的键盘活动的反应（例如，某种定时器会简短地阻止您的处理程序的内容，并将其他事件

相关问题和链接

• 处理DART中的活动


• 使用Dart语言处理键盘事件


• 您如何在Dart中聆听keyUp活动？


• Dart中的浏览器关键事件处理程序


• 跳过键盘事件并绑定到的jQuery示例propertychange

I've got this in my html file:

<textarea id="inputbox" placeholder="type here"></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)

I tried:

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

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

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.

Edit: 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.

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 could be used instead of keyUp and keyDown, but won't generate events for certain keys like backspace and delete.

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.

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.

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.

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).

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.

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).

Related questions and links:

• Handle events in DART
• Handling Keyboard events in Dart Language
• How do you listen for a keyUp event in Dart?
• Cross browser key event handler in Dart
• jQuery example that skips keyboard events and binds to propertychange

这篇关于立即回应Dart的文字变更的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！