如何检查模糊事件的值是否已更改?

时间:2010-02-25 10:00:41

标签: javascript javascript-events onblur

基本上我需要检查'blur'事件的文本框中是否更改了值,这样如果值没有改变,我想取消模糊事件。

如果可以检查它,用户是否在输入HTML元素的blur事件上更改了值?

谢谢,

11 个答案:

答案 0 :(得分:24)

我认为没有本地方法可以做到这一点。我要做的是,向focus事件添加一个函数,将当前值保存到附加到元素(element.oldValue = element.value)的变量中。你可以在BLU上查看该值。

答案 1 :(得分:4)

您无法取消模糊事件,您需要重新聚焦计时器。您可以设置变量onfocus或在change事件上设置hasChanged变量。模糊事件在更改事件之后触发(不幸的是,对于这种情况),否则您可能只是在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;
    }
})();

答案 2 :(得分:4)

onblur事件中,您可以将valuedefaultValue进行比较,以确定是否发生了更改:

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

defaultValue将包含对象的初始值,而value将包含对象当前值更改完成后

参考文献:

value vs defaultValue

答案 3 :(得分:2)

使用Jquery事件我们可以做这个逻辑

步骤1:声明一个变量来比较值

var  lastVal ="";

步骤2:在焦点上获取表单输入的最后一个值

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

  });

第3步:模糊比较

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

答案 4 :(得分:1)

您可以使用此代码:

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

答案 5 :(得分:0)

我知道这已经过时了,但我想我会把它放在以防任何人想要替代品的情况下。这看起来很丑陋(至少对我而言)但是必须处理浏览器处理-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');
        }
      }
    }
  });

答案 6 :(得分:0)

类似这样的事情。使用Kevin Nadsady的上述建议

  

this.value!= this.defaultValue

我在一堆输入上使用共享的CSS类,然后这样做:

'Start Ermittlung der Freibeträge Gesamt.' => [
                                                      '31.05.2018 03:28:45',
                                                      '31.05.2018 03:28:45',
                                                      '31.05.2018 03:28:45',
                                                      '31.05.2018 03:28:45',
                                                      '01.06.2018 03:54:49',
                                                      '01.06.2018 03:54:49',
                                                      '01.06.2018 03:54:49',
                                                      '01.06.2018 03:54:49',
                                                      '02.06.2018 03:30:11',
                                                      '02.06.2018 03:30:11',
                                                      '02.06.2018 03:30:11',
                                                      '02.06.2018 03:30:11',
                                                      '07.06.2018 03:14:45',
                                                      '07.06.2018 03:14:45',
                                                      '07.06.2018 03:14:45',
                                                      '07.06.2018 03:14:45',
                                                      '08.06.2018 03:33:36',
                                                      '08.06.2018 03:33:36',
                                                      '08.06.2018 03:33:36',
                                                      '08.06.2018 03:33:36'
                                                    ],

答案 7 :(得分:0)

即使这是一篇老文章,我也想分享一种使用简单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正文上方)

答案 8 :(得分:0)

类似于@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");
     }
 });

答案 9 :(得分:0)

为什么不只在输入元素上保留自定义标志?

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

https://jsfiddle.net/d7yx63aj

答案 10 :(得分:0)

这个想法是有一个隐藏字段来保留旧值,每当 onblur 事件发生时,检查更改并使用当前文本值更新隐藏值

string html = "<input type=text id=it" + row["cod"] + "inputDesc value='"
                    + row["desc"] + "' onblur =\"if (this.value != document.getElementById('hd" + row["cod"].ToString() + 
                    "inputHiddenDesc').value){ alert('value change'); document.getElementById('hd" + row["cod"].ToString() + 
                    "inputHiddenDesc').value = this.value; }\"> " +
                    "<input type=hidden id=hd" + row["cod"].ToString() + "inputHiddenDesc value='" + row["desc"] + "'>";