كيف يمكنني التحقق مما إذا تم تغيير قيمة في حدث Blur؟

Question

في الأساس ، أحتاج إلى التحقق مما إذا تم تغيير القيمة في مربع نص في حدث "Blur" بحيث إذا لم يتم تغيير القيمة ، فأنا أريد إلغاء حدث Blur.

إذا كان من الممكن التحقق من ذلك ، يتم تغيير القيمة بواسطة المستخدم على حدث Blur لعنصر HTML الإدخال؟

Answer 1

لا أعتقد أن هناك طريقة محلية للقيام بذلك. ما سأفعله هو ، إضافة وظيفة إلى focus الحدث الذي يحفظ القيمة الحالية في متغير متصل بالعنصر (element.oldValue = element.value). يمكنك التحقق من هذه القيمة onblur.

Answer 2

لا يمكنك إلغاء حدث Blur ، فأنت بحاجة إلى إعادة التركيز في مؤقت. يمكنك إما إعداد متغير onfocus أو تعيين أ hasChanged متغير في حدث التغيير. ينطلق حدث Blur بعد حدث التغيير (لسوء الحظ ، لهذا الموقف) وإلا ، يمكنك إعادة ضبط المؤقت في حدث OnChange.

كنت أتبع نهجًا مشابهًا لهذا:

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

Answer 3

في حدود onblur الحدث ، يمكنك مقارنة value ضد ال defaultValue لتحديد ما إذا كان التغيير قد حدث:

<input onblur="if(this.value!=this.defaultValue){alert('changed');}">

ال defaultValue سوف تحتوي على مبدئي قيمة الكائن ، في حين value سوف تحتوي على تيار قيمة الكائن بعد إجراء تغيير.

مراجع:

القيمة مقابل DefaultValue

Answer 4

باستخدام أحداث jQuery يمكننا القيام بهذا المنطق

الخطوة 1: إعلان متغير لمقارنة القيمة

var  lastVal ="";

الخطوة 2: على التركيز احصل على القيمة الأخيرة من إدخال النموذج

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

  });

Step3: على Blur قارنه

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

Answer 5

يمكنك استخدام هذا الرمز:

var Old_Val;
var Input_Field = $('#input');

Input_Field.focus(function(){
     Old_Val = Input_Field.val();
});

Input_Field.blur(function(){
    var new_input_val = Input_Field.val();
    if (new_input_val != Old_Val){
          // execute you code here
    }
});

Answer 6

أعلم أن هذا قديم ، لكنني اعتقدت أنني سأضع هذا في حال يريد أي شخص بديلاً. هذا يبدو قبيحًا (على الأقل بالنسبة لي) ولكن الاضطرار إلى التعامل مع الطريقة التي يتعامل بها المتصفح مع مؤشر -1 هو ما كان التحدي. نعم ، أعلم أنه يمكن القيام به بشكل أفضل مع jQuery.data ، لكنني لست على دراية بذلك حتى الآن.

هنا هو رمز HTML:

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

هنا رمز 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');
        }
      }
    }
  });

Answer 7

شيء من هذا القبيل. باستخدام اقتراح Kevin Nadsady أعلاه

this.value! = this.defaultValue

أستخدم فئة CSS المشتركة على مجموعة من المدخلات ثم تفعل:

    for (var i = 0; i < myInputs.length; i++) {
        myInputs[i].addEventListener('blur', function (evt) {
            if(this.value!=this.defaultValue){
                //value was changed now do your thing
            }
        });
        myInputs[i].addEventListener('focus', function (evt) {
            evt.target.setAttribute("value",evt.target.value);
        });
    }

Answer 8

حتى لو كان هذا منشورًا قديمًا ، فقد اعتقدت أنني سأشارك طريقة للقيام بذلك باستخدام JavaScript البسيط.

جزء JavaScript:

<script type="text/javascript">
function HideLabel(txtField){
	    if(txtField.name=='YOURBOXNAME'){
	        if(txtField.value=='YOURBOXNAME')
	            txtField.value = '';
	        else
	            txtField.select();
	        
	    }
	}
	function ShowLabel(YOURBOXNAME){
	    if(txtField.name=='YOURBOXNAME'){
	        if(txtField.value.trim()=='')
	            txtField.value = 'YOURDEFAULTVALUE';
	    }
	}
</script>

الآن حقل النص في النموذج الخاص بك:

<input type="text" id="input" name="YOURBOXNAME" value="1" onfocus="HideLabel(this)" 
onblur="ShowLabel(this)">

و BEWN! لا حاجة jQuery. فقط JavaScript بسيط. قطع ولصق هؤلاء الأولاد السيئين. (تذكر أن تضع javaScript فوق الجسم في HTML)

Answer 9

على غرار منشور Kevin Nadsady ، سيعمل التالي في وظائف JS الأصلية وأحداث مستمع jQuery. ضمن حدث Onblur ، يمكنك مقارنة القيمة مقابل DefaultValue:

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

Answer 10

لماذا لا تحافظ فقط على علامة مخصصة على عنصر الإدخال؟

input.addEventListener('change', () => input.hasChanged = true);
input.addEventListener('blur', () => 
{
    if (!input.hasChanged) { return; }
    input.hasChanged = false;
    // Do your stuff
});

https://jsfiddle.net/d7yx63aj