StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
text
Body
copied!<p>You can add a normal event listener to your input field like so. (using jQuery)</p> <pre><code>$(myTextControl).change(function() { ... /* do appropriate event handling here */ ... }); </code></pre> <hr> <p>Ok considering that the javascript which changes the input value isn't controlled by you it gets difficult. You are left with two options:</p> <p><strong>1.)</strong> Crossbrowser compatible: Implement polling of input value with a function which continuously checks if the value changed. (Something along these lines).</p> <pre><code>//at beginning before other scripts changes the value create a global variable var oldValue = myTextControl.value; function checkIfValueChanged() { if(myTextControl.value != oldValue) { $(myTextControl).trigger("change"); clearInterval(checker); } } //every 500ms check if value changed var checker = setInterval('checkIfValueChanged()', 500); </code></pre> <blockquote> <p><strong>Note</strong>: If your script or the user can change the value too you must implement something to catch this in order not to trigger the change event multiple times.</p> </blockquote> <p>If the value can change multiple times by the external script just let the interval function run instead of canceling it and just update oldValue;</p> <p><strong>2.)</strong> AFAIK Not supported yet by all browsers (? test it on the ones you need to support)</p> <p>You could bind to a special DOM Level 3Event: <code>DOMAttrModified</code> (in Firefox, maybe others too I think Opera has it too, Safari??, Chrome??) and in IE of course it has a different name <code>propertychange</code> (and is proprietary and different from the W3C behavior)</p> <p>Now ideally you could combine the two options and check if support for <code>DOMAttrModified</code> or <code>propertychange</code> is there and use accordingly or fallback to the polling solution.</p> <hr> <h2>Reading links</h2> <p><a href="http://www.w3.org/TR/DOM-Level-3-Events/#events-mutationevents" rel="noreferrer">W3C DOM Mutation Events</a></p> <p><a href="http://www.w3.org/TR/DOM-Level-3-Events/#event-type-DOMAttrModified" rel="noreferrer">W3C DOMAttrModified Event</a></p> <p><a href="http://msdn.microsoft.com/en-us/library/ms536956(VS.85).aspx" rel="noreferrer">MSDN DHTML propertychange Event</a></p> <p><a href="http://www.west-wind.com/weblog/posts/478985.aspx" rel="noreferrer">jQuery CSS Property Monitoring Plug-in updated</a></p> <p>Last link is some guy which basically already made a jQuery plugin doing the things described by me (untested by me, provided just as a reference)</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