Comment puis-je vérifier si une valeur est modifiée sur le flou de l'événement?

Vous ne pouvez pas annuler l'effet de flou de l'événement, vous avez besoin de recentrer un timer. Vous pouvez soit définir une variable onfocus ou de définir un hasChanged variable sur l'événement de changement. Le flou de l'événement se déclenche après le changement de l'événement (malheureusement, pour cette situation) sinon, vous pourriez vous venez de remettre le chronomètre à zéro dans l'événement onchange.

Je voudrais prendre une approche similaire à ceci:

(function () {
    var hasChanged;
    var element = document.getElementById("myInputElement");
    element.onchange = function () { hasChanged = true; }
    element.onblur = function () {
        if (hasChanged) {
            alert("You need to change the value");

            //blur event can't actually be cancelled so refocus using a timer
            window.setTimeout(function () { element.focus(); }, 0);          
        }
        hasChanged = false;
    }
})();

OriginalL'auteur Andy E

À l'aide de Jquery événements que nous pouvons faire cette logique

Etape 1 : Déclarer une variable de comparer la valeur

var  lastVal ="";

Étape 2: Sur l'objet pour obtenir la dernière valeur de la forme d'entrée

  $("#validation-form :input").focus(function () {
                 lastVal = $(this).val();

  });

Etape 3:Sur le flou de la comparer

$("#validation-form :input").blur(function () {
                 if (lastVal != $(this).val())
                 alert("changed");
             });

OriginalL'auteur Satendra Jindal

Je sais que c'est vieux, mais j'ai pensé que je l'avais mis cela dans le cas où quelqu'un veut une alternative. Cela semble laid (au moins pour moi), mais d'avoir à traiter avec la façon dont le navigateur gère le -1 de l'indice est ce qui a été le défi. Oui, je sais qu'il peut faire mieux avec jquery.les données, mais je ne suis pas familier avec encore.

Voici le code HTML:

<select id="selected">
  <option value="1">A</option>
  <option value="2">B</option>
  <option value="3">C</option>
</select>

Voici le code javascript:

var currentIndex; //set up a global variable for current value

$('#selected').on(
  { "focus": function() { //when the select is clicked on
      currentIndex = $('#selected').val(); //grab the current selected option and store it
      $('#selected').val(-1); //set the select to nothing 
    }
  , "change": function() { //when the select is changed
      choice = $('#selected').val(); //grab what (if anything) was selected
      this.blur(); //take focus away from the select
      //alert(currentIndex);
      //setTimeout(function() { alert(choice); }, 0);
    }
  , "blur": function() { //when the focus is taken from the select (handles when something is changed or not)
      //alert(currentIndex);
      //alert($('#selected').val());
      if ($('#selected').val() == null) { //if nothing has changed (because it is still set to the -1 value, or null)
        $('#selected').val(currentIndex); //set the value back to what it originally was (otherwise it will stay at what was newly selected)
      } else { //if anything has changed, even if it's the same one as before
        if ($('#selected').val() == 2) { //in case you want to do something when a certain option is selected (in my case, option B, or value 2) 
            alert('I would do something');
        }
      }
    }
  });

OriginalL'auteur Antonio DeLaCruz

Similaire à @Kevin Nadsady post, le travail en natif fonctions JS et JQuery écouteur d'événements. Au sein de l'événement onblur, vous pouvez comparer la valeur par rapport à la valeur par défaut:

 $(".saveOnChange").on("blur", function () {
     if (this.value != this.defaultValue) {
         //Set the default value to the new value
         this.defaultValue = this.value;
         //todo: save changes
         alert("changed");
     }
 });

OriginalL'auteur Easton James Harvey