S_a_k_Uの日記みたいなDB

～サクゥーと呼ばないで～

入力内容が変更されたらダイアログを出す（改）

技術メモ HTML JavaScript

ちょっと改造してみた。
舐め舐めする負荷ってどんなもん？
と思って、5000個くらいテキストフィールド付けてみたら、やっぱりちょっとモサっと感がある感じ。

<html>
    <head>
        <script type="text/javascript">
        
            var initVal = null;
            
            function onchangeinit() {
                var elems = document.forms[0].elements;
                var cnt = elems.length;
                initVal = new Array(cnt);
                for ( var i = 0 ; i < cnt ; i++ ) { 
                    var e = elems[i];
                    if (isTarget(e) == true) {
                        initVal[e.id] = getValue(e);
                    }
                }
            }

            function isTarget(ctrl) {
                var typ = new String(ctrl.nodeName).toLowerCase();
                if (typ == "input") {
                    var inpTyp = new String(ctrl.type).toLowerCase();
                    if (",hidden,button,reset,submit,image,".indexOf(inpTyp) > -1) {
                        return false;
                    }
                    return true;
                } else if (typ == "textarea") {
                    return true;
                } else if (typ == "select") {
                    return true;
                }
                return false;
            }

            function getValue(ctrl) {
                var typ = new String(ctrl.nodeName).toLowerCase();
                if (typ == "input") {
                    var inpTyp = new String(ctrl.type);
                    if (",checkbox,radio,".indexOf(inpTyp) > -1) {
                        return ctrl.checked;
                    }
                }
                return ctrl.value;
            }

            function setValue(ctrl, val) {
                var typ = new String(ctrl.nodeName).toLowerCase();
                if (typ == "input") {
                    var inpTyp = new String(ctrl.type).toLowerCase();
                    if (",checkbox,radio,".indexOf(inpTyp) > -1) {
                        ctrl.checked = val;
                        return true;
                    }
                }
                ctrl.value = val;
                return true;
            }

            function initValue() {
                var elems = document.forms[0].elements;
                var cnt = elems.length;
                for ( var i = 0 ; i < cnt ; i++ ) { 
                    var e = elems[i];
                    if (isTarget(e) == true) {
                        setValue(e, initVal[e.id]);
                    }
                }
                return true;
            }

            function isChanged() { 
                var elems = document.forms[0].elements;
                var cnt = elems.length;
                var txt = new String();
                for ( var i = 0 ; i < cnt ; i++ ) { 
                    var e = elems[i];
                    if (isTarget(e) == true) {
                        if (initVal[e.id] != getValue(e)) {
                            txt += (e.id + " : " + initVal[e.id] + " -> " + getValue(e) + "\n");
                        }
                    }
                }
                if (txt.length > 0) {
                   return confirm(txt + "変更してるよ？");
                } 
                return true;
            }

        </script>
    </head>
    <body onload="onchangeinit()">
        <form>
            <input id="id01" type="text" value="aa" />
            <input id="id02" type="checkbox" />
            <input id="id03" type="radio" name="a" checked />
            <input id="id04" type="radio" name="a" />
            <input id="id05" type="radio" name="a" />
            <input id="id06" type="radio" name="a" />
            <textarea id="id07" ></textarea>
            <select id="id08">
                <option value="1">1</option>
                <option value="2">2</option>
            </select>
            <a id="id09"  href="http://www.google.com" onclick="return isChanged()" target="_blank">変更されたらいけないぶり</a>
        </form>
        <input id="id10"  type="button" onclick="initValue();" value="リセット"/>
    </body>
</html>