StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
text
Body
copied!<p>I'd suggest attaching listeners to key events fired by the editable element, though you need to be aware that <code>keydown</code> and <code>keypress</code> events are fired before the content itself is changed. This won't cover every possible means of changing the content: the user can also use cut, copy and paste from the Edit or context browser menus, so you may want to handle the <code>cut</code> <code>copy</code> and <code>paste</code> events too. Also, the user can drop text or other content, so there are more events there (<code>mouseup</code>, for example). You may want to poll the element's contents as a fallback.</p> <p><strong>UPDATE 29 October 2014</strong></p> <p>The <a href="https://developer.mozilla.org/en-US/docs/Web/Reference/Events/input" rel="nofollow noreferrer">HTML5 <code>input</code> event</a> is the answer in the long term. At the time of writing, it is supported for <code>contenteditable</code> elements in current Mozilla (from Firefox 14) and WebKit/Blink browsers, but not IE.</p> <p><strong>Demo:</strong></p> <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false"> <div class="snippet-code"> <pre class="snippet-code-js lang-js prettyprint-override"><code>document.getElementById("editor").addEventListener("input", function() { console.log("input event fired"); }, false);</code></pre> <pre class="snippet-code-html lang-html prettyprint-override"><code><div contenteditable="true" id="editor">Please type something in here</div></code></pre> </div> </div> </p> <p>Demo: <a href="http://jsfiddle.net/ch6yn/2691/" rel="nofollow noreferrer">http://jsfiddle.net/ch6yn/2691/</a></p>

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