Méthode JavaScript pour déterminer si l'utilisateur a modifié les compétences form_javascript

L'exemple de cet article décrit comment JavaScript détermine si l'utilisateur a modifié le formulaire. Partagez-le avec tout le monde pour votre référence. L'analyse spécifique est la suivante :

Ce code JS peut déterminer si l'utilisateur a modifié le contenu du formulaire. Si le formulaire est modifié et que le navigateur se ferme, il sera rappelé à l'utilisateur s'il doit enregistrer le contenu du formulaire.

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;
}

Exemple d'utilisation : A la sortie du navigateur, si l'utilisateur modifie le formulaire, rappeler à l'utilisateur s'il doit le sauvegarder

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.";
 }
};

Ce qui suit est un exemple de code complet

Copier le code Le code est le suivant :

Cliquez sur le bouton ci-dessous. Modifiez maintenant certaines valeurs dans le formulaire et cliquez. appuyez à nouveau sur le bouton.






           foo
                                                                             


Cliquez pour vérifier si le formulaire est sale


<script><br> fonction formIsDirty(form) {<br> pour (var i = 0; i < form.elements.length; i ) {<br /> var element = form.elements[i];<br /> var type = élément.type;<br /> Si (type == "checkbox" || type == "radio") {<br /> Si (element.checked != element.defaultChecked) {<br />         return true ;<br /> ><br /> ><br /> else if (type == "caché" || type == "mot de passe" ||<br /> tapez == "texte" || tapez == "zone de texte") {<br /> Si (element.value != element.defaultValue) {<br />         return true ;<br /> ><br /> ><br /> ​ else if (type == "select-one" || type == "select-multiple") {<br /> pour (var j = 0; j < element.options.length; j ) {<br /> Si (element.options[j].selected !=<br />                 element.options[j].defaultSelected) {<br />           return true ;<br /> ><br /> ><br /> ><br /> ><br /> retourner faux ;<br /> ><br /> </script>

J'espère que cet article sera utile à la conception de la programmation JavaScript de chacun.