fineui/src/third/jquery.splendid.textchange.js

/**
 * jQuery "splendid textchange" plugin
 * http://benalpert.com/2013/06/18/a-near-perfect-oninput-shim-for-ie-8-and-9.html
 *
 * (c) 2013 Ben Alpert, released under the MIT license
 */

(function($) {

    var testNode = document.createElement("input");
    var isInputSupported = "oninput" in testNode &&
        (!("documentMode" in document) || document.documentMode > 9);

    var hasInputCapabilities = function(elem) {
        // The HTML5 spec lists many more types than `text` and `password` on
        // which the input event is triggered but none of them exist in IE 8 or
        // 9, so we don't check them here.
        // TODO: <textarea> should be supported too but IE seems to reset the
        // selection when changing textarea contents during a selectionchange
        // event so it's not listed here for now.
        return elem.nodeName === "INPUT" &&
            (elem.type === "text" || elem.type === "password");
    };

    var activeElement = null;
    var activeElementValue = null;
    var activeElementValueProp = null;

    /**
     * (For old IE.) Replacement getter/setter for the `value` property that
     * gets set on the active element.
     */
    var newValueProp =  {
        get: function() {
            return activeElementValueProp.get.call(this);
        },
        set: function(val) {
            activeElementValue = val;
            activeElementValueProp.set.call(this, val);
        }
    };

    /**
     * (For old IE.) Starts tracking propertychange events on the passed-in element
     * and override the value property so that we can distinguish user events from
     * value changes in JS.
     */
    var startWatching = function(target) {
        activeElement = target;
        activeElementValue = target.value;
        activeElementValueProp = Object.getOwnPropertyDescriptor(
            target.constructor.prototype, "value");

        Object.defineProperty(activeElement, "value", newValueProp);
        activeElement.attachEvent("onpropertychange", handlePropertyChange);
    };

    /**
     * (For old IE.) Removes the event listeners from the currently-tracked
     * element, if any exists.
     */
    var stopWatching = function() {
        if (!activeElement) return;

        // delete restores the original property definition
        delete activeElement.value;
        activeElement.detachEvent("onpropertychange", handlePropertyChange);

        activeElement = null;
        activeElementValue = null;
        activeElementValueProp = null;
    };

    /**
     * (For old IE.) Handles a propertychange event, sending a textChange event if
     * the value of the active element has changed.
     */
    var handlePropertyChange = function(nativeEvent) {
        if (nativeEvent.propertyName !== "value") return;

        var value = nativeEvent.srcElement.value;
        if (value === activeElementValue) return;
        activeElementValue = value;

        $(activeElement).trigger("textchange");
    };

    if (isInputSupported) {
        $(document)
            .on("input", function(e) {
                // In modern browsers (i.e., not IE 8 or 9), the input event is
                // exactly what we want so fall through here and trigger the
                // event...
                if (e.target.nodeName !== "TEXTAREA") {
                    // ...unless it's a textarea, in which case we don't fire an
                    // event (so that we have consistency with our old-IE shim).
                    $(e.target).trigger("textchange");
                }
            });
    } else {
        $(document)
            .on("focusin", function(e) {
                // In IE 8, we can capture almost all .value changes by adding a
                // propertychange handler and looking for events with propertyName
                // equal to 'value'.
                // In IE 9, propertychange fires for most input events but is buggy
                // and doesn't fire when text is deleted, but conveniently,
                // selectionchange appears to fire in all of the remaining cases so
                // we catch those and forward the event if the value has changed.
                // In either case, we don't want to call the event handler if the
                // value is changed from JS so we redefine a setter for `.value`
                // that updates our activeElementValue variable, allowing us to
                // ignore those changes.
                if (hasInputCapabilities(e.target)) {
                    // stopWatching() should be a noop here but we call it just in
                    // case we missed a blur event somehow.
                    stopWatching();
                    startWatching(e.target);
                }
            })

            .on("focusout", function() {
                stopWatching();
            })

            .on("selectionchange keyup keydown", function() {
                // On the selectionchange event, e.target is just document which
                // isn't helpful for us so just check activeElement instead.
                //
                // 90% of the time, keydown and keyup aren't necessary. IE 8 fails
                // to fire propertychange on the first input event after setting
                // `value` from a script and fires only keydown, keypress, keyup.
                // Catching keyup usually gets it and catching keydown lets us fire
                // an event for the first keystroke if user does a key repeat
                // (it'll be a little delayed: right before the second keystroke).
                // Other input methods (e.g., paste) seem to fire selectionchange
                // normally.
                if (activeElement && activeElement.value !== activeElementValue) {
                    activeElementValue = activeElement.value;
                    $(activeElement).trigger("textchange");
                }
            });
    }

})(jQuery);