基本上我需要检查'blur'事件的文本框中是否更改了值,这样如果值没有改变,我想取消模糊事件。
如果可以检查它,用户是否在输入HTML元素的blur事件上更改了值?
谢谢,
答案 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
事件中,您可以将value
与defaultValue
进行比较,以确定是否发生了更改:
<input onblur="if(this.value!=this.defaultValue){alert('changed');}">
defaultValue
将包含对象的初始值,而value
将包含对象的当前值更改完成后。
参考文献:
答案 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)">
答案 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
});
答案 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"] + "'>";