Javascript 如何检查模糊事件的值是否更改？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/2333111/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How can I check if a value is changed on blur event?
提问by pencilCake
Basically I need to check if the value is changed in a textbox on the 'blur' event so that if the value is not changed, I want to cancel the blur event.
基本上，我需要检查“模糊”事件的文本框中的值是否更改，以便如果值未更改，我想取消模糊事件。
If it possible to check it the value is changed by user on the blur event of an input HTML element?
如果可以检查它的值是否由用户在输入 HTML 元素的模糊事件中更改？
回答by Pekka
I don't think there is a native way to do this. What I would do is, add a function to the focusevent that saves the current value into a variable attached to the element (element.oldValue = element.value). You could check against that value onBLur.
我不认为有一种本地方式可以做到这一点。我会做的是，向focus事件添加一个函数，将当前值保存到附加到元素 ( element.oldValue = element.value)的变量中。您可以检查 onBLur 的值。
回答by Kevin Nadsady
Within the onblurevent, you can compare the valueagainst the defaultValueto determine whether a change happened:
在onblur事件中，您可以将 与value进行比较defaultValue以确定是否发生了更改：
<input onblur="if(this.value!=this.defaultValue){alert('changed');}">
The defaultValuewill contain the initialvalue of the object, whereas the valuewill contain the currentvalue of the object after a change has been made.
在defaultValue将包含初始的对象的值，而value将包含当前的对象的值的变化已作出之后。
References:
参考：
回答by Andy E
You can't cancel the blur event, you need to refocus in a timer. You could either set up a variable onfocus or set a hasChangedvariable on the change event. The blur event fires after the change event (unfortunately, for this situation) otherwise you could have just reset the timer in the onchange event.
您无法取消模糊事件，您需要在计时器中重新聚焦。您可以设置一个变量 onfocus 或设置一个hasChanged变量在 change 事件上。模糊事件在更改事件之后触发（不幸的是，对于这种情况），否则您可以在 onchange 事件中重置计时器。
I'd take an approach similar to this:
我会采取类似的方法：
(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;
}
})();
回答by Satendra Jindal
Using Jquery events we can do this logic
使用 Jquery 事件我们可以做这个逻辑
Step1 : Declare a variable to compare the value
Step1：声明一个变量来比较值
var lastVal ="";
Step 2: On focus get the last value from form input
第 2 步：在焦点上从表单输入中获取最后一个值
$("#validation-form :input").focus(function () {
lastVal = $(this).val();
});
Step3:On blur compare it
第3步：在模糊比较它
$("#validation-form :input").blur(function () {
if (lastVal != $(this).val())
alert("changed");
});
回答by Mohamad Hamouday
You can use this code:
您可以使用此代码：
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
}
});
回答by Léon Pelletier
Why not just maintaining a custom flag on the input element?
为什么不只在输入元素上维护一个自定义标志？
input.addEventListener('change', () => input.hasChanged = true);
input.addEventListener('blur', () =>?
{
if (!input.hasChanged) { return; }
input.hasChanged = false;
// Do your stuff
});
回答by Antonio DeLaCruz
I know this is old, but I figured I'd put this in case anyone wants an alternative. This seems ugly (at least to me) but having to deal with the way the browser handles the -1 index is what was the challenge. Yes, I know it can be done better with the jquery.data, but I'm not that familiar with that just yet.
我知道这很旧，但我想我会放这个以防万一有人想要替代品。这看起来很难看（至少对我而言），但必须处理浏览器处理 -1 索引的方式才是挑战。是的，我知道使用 jquery.data 可以做得更好，但我还不太熟悉。
Here is the HTML code:
这是 HTML 代码：
<select id="selected">
<option value="1">A</option>
<option value="2">B</option>
<option value="3">C</option>
</select>
Here is the javascript 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');
}
}
}
});
回答by Ronnie Royston
Something like this. Using Kevin Nadsady's above suggestion of
像这样的东西。使用 Kevin Nadsady 的上述建议
this.value!=this.defaultValue
this.value!=this.defaultValue
I use a shared CSS class on a bunch of inputs then do:
我在一堆输入上使用共享的 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);
});
}
回答by Micheil Skeens
Even if this is an old post, I thought i'd share a way to do this with simple javascript.
即使这是一个旧帖子，我想我会分享一种使用简单的 javascript 来做到这一点的方法。
The javascript portion:
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>Now the text field in your form:
现在表单中的文本字段：
<input type="text" id="input" name="YOURBOXNAME" value="1" onfocus="HideLabel(this)"
onblur="ShowLabel(this)">回答by Easton James Harvey
Similar to @Kevin Nadsady's post, the following will work in native JS functions and JQuery listener events. Within the onblur event, you can compare the value against the defaultValue:
与@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");
}
});
