25

基本上我需要检查 'blur' 事件的文本框中的值是否更改，以便如果值没有更改，我想取消模糊事件。

如果可以检查它，用户在输入 HTML 元素的模糊事件上更改了值吗？

4

11 回答 11

35

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

于 2010-02-25T10:03:16.280 回答
8

在onblur事件中，您可以将 与 进行比较value以defaultValue确定是否发生了更改：

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

将defaultValue包含对象的初始值，而value将包含对象在进行更改后的当前值。

参考：

值与默认值

于 2016-11-17T23:11:41.603 回答
6

您无法取消模糊事件，您需要在计时器中重新聚焦。您可以设置一个变量 onfocus 或hasChanged在更改事件上设置一个变量。blur 事件在 change 事件之后触发（不幸的是，在这种情况下），否则您可以在 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;
    }
})();
于 2010-02-25T10:39:24.993 回答
3

为什么不在输入元素上维护一个自定义标志？

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

https://jsfiddle.net/d7yx63aj

于 2019-06-21T14:57:37.947 回答
2

使用 Jquery 事件，我们可以执行此逻辑

Step1：声明一个变量来比较值

var  lastVal ="";

第 2 步：在焦点上从表单输入中获取最后一个值

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

  });

Step3：在模糊比较它

$("#validation-form :input").blur(function () {
                 if (lastVal != $(this).val())
                 alert("changed");
             });
于 2014-09-01T11:48:59.567 回答
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
    }
});
于 2016-06-22T08:31:47.717 回答
1

我知道这是旧的，但我想我会放这个以防有人想要替代品。这看起来很难看（至少对我来说），但必须处理浏览器处理 -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');
        }
      }
    }
  });
于 2016-11-17T19:59:31.577 回答
0

像这样的东西。使用 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);
        });
    }
于 2018-07-20T14:59:16.783 回答
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)">
还有！不需要 Jquery。只是简单的javascript。剪切和粘贴那些坏男孩。（记得把你的 javascript 放在 html 的正文上方）

于 2018-10-31T10:24:33.463 回答
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");
     }
 });
于 2019-01-26T22:37:15.337 回答
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"] + "'>";
于 2021-06-09T13:05:56.927 回答