フォームが変更された事を知る

昔なら全てのフォーム部品にonchangeを書いていましたけど、attachEventが使える今、ちょいと書き直してみました。

 var types = [
     "text",
     "password",
     "radio",
     "checkbox",
     "textarea",
     "select-one",
     "select-multiple",
     "button",
     "submit",
     "reset",
     ""
 ];

 function attachOnChange() {
     for (var i = 0; i < document.forms.length; i++) {
         var elements = document.forms[i].elements;
         for (var j = 0; j < elements.length; j++) {
             var e = elements[j];
             if (types.join().indexOf(e.type + ",") != -1) {
                 e.attachEvent("onchange", elementOnChange);
             }
         }
     }
 }

 var changedForm= false;
 function elementOnChange() {
     changedForm= true;
 }

 function isChangedForm() {
     return changedForm;
 }

 window.attachEvent("onload", attachOnChange);

このJavaScriptをincludeした画面は、isChangedForm()を呼び出す事により、フォーム部品がひとつでも変更されているか取得する事ができます。このスクリプトを使う場面は画面で1箇所でも入力・変更されていた時に、画面遷移しようとしたら「データが変更されています。保存しますか？」みたいに表示する時だと思います。

ちょっと改良すれば、特定の入力部品だけとか、フォームだけってのはできますね。attachEventを知ってからいろいろ楽になりました(^-^)クロスブラウザを考えるなら、addEventListenerとattachEventを使い分ける処理が必要そうです。