ユーザーが 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.";
 }
};

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

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

下のボタンをクリックして、フォーム内の値をいくつか変更してクリックします。もう一度ボタンを押してください。
4fcd1a21fe9a955e56469dbcdfb50edc
f9f8cb3fc15ff683ecb7aa897331e5170c6dc11e160d3b678d68754cc175188a
b29032f60b085ba7995634e35655630f0c6dc11e160d3b678d68754cc175188a
d7700d6b5a5db7d448a812f607db81ad
c6bf10f87f21e52d65963f148942bb74foo4afa15d3069109ac30911f04c56f3338
                                                                                  18bb6ffaf0152bbe49cd8a36203463410c6dc11e160d3b678d68754cc175188a
f5a47148e367a6035fd7a2faa965022e
952652e591fede9a3a3f5597cc096fc6クリックしてフォームが汚れているかどうかを確認します65281c5ac262bf6d81768915a4a77ac0
0c6dc11e160d3b678d68754cc175188a
4e07eaec52b67b6abe4024604b22f1f1
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 を返します;
}
2cacc6d41bbb37262a98f745aa00fbf0

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