var documentElement = document.documentElement;

​

/**

 * 要素にテキストを設定する。textContentプロパティのクロスブラウザ関数

 * @param {Node} targetNode 設定対象の要素

 * @param {string} text 設定するテキスト

 */

var setText =

    ('textContent' in documentElement)

    ? function (targetNode, text) {

        /**

         * 対象要素のtextContentプロパティに新しいテキストを代入

         */

        targetNode.textContent = text;

    }

    : function (targetNode, text) {

        /**

         * 対象要素内の全子要素を削除

         */

        var childNode;

        while ((childNode = targetNode.firstChild)) {

            targetNode.removeChild(childNode);

        }

        /**

         * テキストノードを挿入

         */

        targetNode.appendChild(

            targetNode.ownerDocument.createTextNode(text)

        );

    }

;

​

/**

 * クロスブラウザなinputイベントを設定する

 * @param {Node} targetNode 設定対象の要素

 * @param {function(Event)} listener 設定するイベントリスナー(実行関数)

 */

var addInputEventListener =

    (documentElement.addEventListener)

    ? function (targetNode, listener) {

        var document = targetNode.ownerDocument;

​

        /**

         * タイマーによるinputイベント処理の際、タイマーIDを格納する

         * @type {number}

         */

        var timeoutID;

        /**

         * 重複したイベントの発生を防ぐため、

         * 最後のイベント発生時の入力値を格納する

         * @type {string}

         */

        var lastValue = targetNode.value;

        /**

         * 入力値が変化したか検証する

         * @return {boolean} 入力値が変化している場合、trueを返す

         */

        var isValueUpdated = function () {

            /**

             * 最後のイベント発生時の入力値と比較し、

             * 変更されていた場合にtrueを出力する

             */

            return lastValue !== targetNode.value;

        };

        /**

         * 入力値が変化していた場合、

         * DOM Level 2 Eventsで可能な範囲で擬似inputイベントを作成し、

         * 対象要素に対してディスパッチ(発火)させる。

         */

        var dispatchInputEvent = function () {

            if (isValueUpdated()) {

                var event = document.createEvent('HTMLEvents');

                event.initEvent('input', true, false);

                targetNode.dispatchEvent(event);

            }

        };

        /**

         * タイマーによるinputイベント処理のための関数。

         * selectionchangeイベントに対応していない場合、

         * setTimeoutで250ミリ秒毎にこの関数を呼び出す。

         */

        var timerInput = function () {

            /**

             * DOM Level 2 Eventsで可能な範囲で擬似inputイベントを作成し、

             * 対象要素に対してディスパッチ(発火)させる。

             */

            dispatchInputEvent();

            /**

             * selectionchangeイベントに対応していない場合、

             * setTimeoutで250ミリ秒後に、

             * timerInput関数を呼び出す。

             */

            if (!addInputEventListener._support_selectionchange_event) {

                timeoutID = setTimeout(timerInput, 250);

            }

        };

        /**

         * selectionchangeイベントによる

         * inputイベント処理のための関数。

         * `_support_selectionchange_event`をtrueに変更し、

         * 対応フラグを有効にする。

         */

        var onSelectionchange = function () {

            addInputEventListener._support_selectionchange_event = true;

            /**

             * DOM Level 2 Eventsで可能な範囲で擬似inputイベントを作成し、

             * 対象要素に対してディスパッチ(発火)させる。

             */

            dispatchInputEvent();

        };

​

        targetNode.addEventListener('input', function (event) {

            /**

             * 最後のイベント発生時の入力値と比較し、

             * 変更されていた場合に

             * 指定された処理を実行する。

             */

            if (isValueUpdated()) {

                lastValue = targetNode.value;

                listener.call(targetNode, event);

            }

        }, false);

        targetNode.addEventListener('focus', function () {

            /**

             * selectionchangeイベントを追加

             */

            document.addEventListener('selectionchange', onSelectionchange, false);

            /**

             * selectionchangeイベントに対応していない場合、

             * timerInput関数を呼び出し

             * タイマーによるinputイベント処理を開始する。

             */

            if (!addInputEventListener._support_selectionchange_event) {

                timerInput();

            }

        }, false);

        targetNode.addEventListener('blur', function () {

            /**

             * selectionchangeイベントを削除

             */

            document.removeEventListener('selectionchange', onSelectionchange, false);

            /**

             * タイマーを停止

             */

            clearTimeout(timeoutID);

        }, false);

    }

​

    : (documentElement.attachEvent)

    ? function (targetNode, listener) {

        var document = targetNode.ownerDocument;

        var window = document.defaultView;

​

        /**

         * addEventListenerメソッドに非対応で

         * attachEventメソッドに対応している場合、

         * propertychangeイベントでinputイベントの処理を行う。

         */

        targetNode.attachEvent('onpropertychange', function (event) {

            event = event || window.event;

​

            if (event.propertyName.toLowerCase() === 'value') {

                event.preventDefault = event.preventDefault || function () { event.returnValue = false; };

                event.stopPropagation = event.stopPropagation || function () { event.cancelBubble = true; };

                event.target = event.target || event.srcElement || document.documentElement;

                event.currentTarget = event.currentTarget || targetNode;

                event.timeStamp = event.timeStamp || (new Date()).getTime();

​

                listener.call(targetNode, event);

            }

        });

    }

​

    : function (targetNode, listener) { }

;

/**

 * @type {boolean}

 * selectionchangeイベント対応時にtrueとなる

 */

addInputEventListener._support_selectionchange_event = false;

​

​

​

​

​

var textinput = document.getElementById('textinput');

var textarea = document.getElementById('textarea');

var output1 = document.getElementById('output1');

var output2 = document.getElementById('output2');

​

addInputEventListener(textinput, function () {

    setText(output1, textinput.value);

});

addInputEventListener(textarea, function () {

    setText(output2, textarea.value);

});