ユーザーが form_javascript スキルを変更したかどうかを判断する JavaScript メソッド

この記事の例では、ユーザーがフォームを変更したかどうかを JavaScript がどのように判断するかを説明します。皆さんの参考に共有してください。具体的な分析は次のとおりです。

この JS コードは、ユーザーがフォームの内容を変更したかどうかを判断し、フォームが変更されてブラウザが終了した場合に、フォームの内容を保存するかどうかをユーザーに通知する非常に便利なコードです。

function formIsDirty(form) {
 for (var i = 0; i < form.elements.length; i++) {
  var element = form.elements[i];
  var type = element.type;
  if (type == "checkbox" || type == "radio") {
   if (element.checked != element.defaultChecked) {
    return true;
   }
  }
  else if (type == "hidden" || type == "password" ||
       type == "text" || type == "textarea") {
   if (element.value != element.defaultValue) {
    return true;
   }
  }
  else if (type == "select-one" || type == "select-multiple") {
   for (var j = 0; j < element.options.length; j++) {
    if (element.options[j].selected !=
      element.options[j].defaultSelected) {
     return true;
    }
   }
  }
 }
 return false;
}

使用例: ブラウザを終了するときに、ユーザーがフォームを変更した場合、それを保存するかどうかをユーザーに通知します

window.onbeforeunload = function(e) {
 e = e || window.event; 
 if (formIsDirty(document.forms["someForm"])) {
  // For IE and Firefox
  if (e) {
   e.returnValue = "You have unsaved changes.";
  }
  // For Safari
  return "You have unsaved changes.";
 }
};

以下は完全なサンプル コードです

コードをコピーします コードは次のとおりです:

下のボタンをクリックして、フォーム内の値をいくつか変更してクリックします。もう一度ボタンを押してください。
<フォーム名="fooForm">




<名前="some"を選択>
foo
                                                                                 


クリックしてフォームが汚れているかどうかを確認します


<スクリプト>
function formIsDirty(form) {
for (var i = 0; i var 要素 = form.elements[i];
var type = element.type;
If (type == "チェックボックス" || type == "ラジオ") {
If (element.checked != element.defaultChecked) {
true を返します;
}
}
else if (type == "hidden" || type == "password" ||
タイプ == "テキスト" || タイプ == "テキストエリア") {
If (element.value != element.defaultValue) {
true を返します;
}
}
else if (type == "select-one" || type == "select-multiple") {
for (var j = 0; j If (element.options[j].selected !=
element.options[j].defaultSelected) {
true を返します;
}
}
}
}
false を返します;
}

この記事が皆様の JavaScript プログラミング設計に役立つことを願っています。