StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
text
Body
copied!<p>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.</p> <p><em>Edit: Code snippet updated to the <a href="http://news.dartlang.org/2013/01/new-dom-event-streams-api.html" rel="nofollow noreferrer">new pattern</a> for event registration.</em></p> <pre><code>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); } </code></pre> <p>The precise behavior will vary between browsers and operating systems.</p> <p>You could skip <code>keyDown</code>, but be aware <em>keyDown</em> and <em>keyUp</em> behavior is influenced by the OS and <a href="http://lists.w3.org/Archives/Public/www-dom/2011AprJun/0202.html" rel="nofollow noreferrer">isn't guaranteed to be symmetric</a>. You might conceivably miss a change, at least until the next <em>keyUp</em> or <em>change</em> 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.</p> <p><code>keyPress</code> could be used instead of <em>keyUp</em> and <em>keyDown</em>, but <a href="https://stackoverflow.com/questions/3911589/why-doesnt-keypress-handle-the-delete-key-and-the-backspace-key">won't generate events</a> for certain keys like backspace and delete.</p> <p><code>cut</code> and <code>paste</code> react immediately to a cut or paste performed with the mouse. If you don't use them, the <code>change</code> event will capture the change, but not until after the field loses focus, or <a href="https://stackoverflow.com/a/8922439/589059">sometimes even later</a>.</p> <p>The <code>input</code> event could replace all listeners above and seems to work great in Dartium, but under IE9 it only captures character additions, not removals.</p> <p>Note <code>keyUp</code> and <code>keyDown</code> 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.</p> <p>While the question is specific to Dart, a lot of the discussion above applies to any code listening to the DOM. Even <em>keyCode</em> values <a href="http://www.javascripter.net/faq/keycodes.htm" rel="nofollow noreferrer">aren't standardized</a> across browsers (<a href="http://www.quirksmode.org/dom/events/keys.html" rel="nofollow noreferrer">more detail</a>).</p> <p>It may also be worthwhile checking out the <a href="http://api.dartlang.org/docs/bleeding_edge/dart_html/KeyboardEventController.html" rel="nofollow noreferrer">KeyboardEventController</a> 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 <a href="http://www.dartlang.org/articles/improving-the-dom/#cross-browser-consistency" rel="nofollow noreferrer">insulate you</a> from cross-browser inconsistencies, but it's still a work in progress.</p> <p>Also while we're talking about <em>textarea</em>, remember to use its <code>value</code> property, <a href="https://stackoverflow.com/questions/11705499/cannot-get-text-from-text-area">not its <em>text</em> property</a>. Finally, be sure your <code>handler</code> 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).</p> <p><strong>Related questions and links:</strong></p> <ul> <li><a href="https://stackoverflow.com/questions/10197010/handle-events-in-dart">Handle events in DART</a></li> <li><a href="https://coderwall.com/p/5n6c3q" rel="nofollow noreferrer">Handling Keyboard events in Dart Language</a></li> <li><a href="https://stackoverflow.com/questions/10560113/how-do-you-listen-for-a-keyup-event-in-dart">How do you listen for a keyUp event in Dart?</a></li> <li><a href="https://stackoverflow.com/questions/13141946/cross-browser-key-event-handler-in-dart">Cross browser key event handler in Dart</a></li> <li><a href="https://stackoverflow.com/a/11338644/589059">jQuery example that skips keyboard events and binds to <em>propertychange</em></a></li> </ul>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload