Respond to changes in textarea in Dart immediately
I have this in my html file:
<textarea id="inputbox" placeholder="type here"></textarea> What is the correct way to connect a handler that will fire immediately when the contents of a text field change? (be it keyboard, mouse / clipboard, speech input, brainwave reader, etc.)
I tried:
query("#inputbox").on.change.add(handler) but (at least on Dartium) it only starts after you leave the field.
The goal is to refresh the “preview” window, similar to how Stackoverflow displays Markdown output during input.
This is the best I've come up with so far. I would be happy to hear if anyone knows a more compact or preferred alternative.
Edit: the code fragment has been updated to a new template for registering the event.
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 exact behavior will vary between browsers and operating systems.
You can skip keyDown , but remember that the behavior of keyDown and keyUp is OS dependent and not guaranteed to be symmetrical.Maybe you may skip the changes, at least until the next keyUp event or change is fired. Indeed, I proved this by creating a small application in Windows 7 to send a WM_KEYDOWN orphan message to Dartium and IE9.
keyPress can be used instead of keyUp and keyDown, but will not generate events for specific keys, such as backspace and delete.
cut and paste immediately respond to a cut or paste made with the mouse. If you do not use them, the change event will accept the change, but only after the field loses focus, or sometimes even later .
The input event can replace all of the above listeners and seems to work just fine in Dartium, but in IE9 it only captures character additions, not deletions.
Note keyUp and keyDown can create additional unwanted events for the cursor keys, home, end, shift, etc. (e.g. in IE9). It will fire in addition to cut / paste listeners when the user uses keyboard shortcuts for these actions.
While the question is specific to Darth, most of the discussion above applies to any code that listens to the DOM. Even the key code values are not standardized in browsers ( more ).
It may also be useful to test the KeyboardEventController class, although by and large, when I tested it, the behavior of the edge behavior was similar to that indicated above. It may or may not be by design. Dart developers are making some efforts to isolate you from inconsistencies between browsers, but this is still ongoing.
Also, when we talk about textarea, remember to use its value property, not its text property . Finally, make sure that your handler throttles the response to “bursts” of keyboard activity (for example, some kind of timer that briefly discards the guts of your handler and accumulates any additional events that occur during this time).
Related questions and links:
It is unclear whether you use polymer or not, but if so, you can subscribe to change a variable annotated with @observable by creating a function in the polymer element in the form as [variable name] Changed (OldValue). I originally found this here: How to subscribe to a change in the observed field