![](/img/trans.png)
[英]Is there any way to trigger a 'change' event listener if input value change dynamically?
[英]jQuery Change event on an <input> element - any way to retain previous value?
我今天早上一直在寻找,我找不到任何简单的解决方案...基本上,我想捕获输入元素的变化,但也知道以前的值。
这是一个更改事件和最简单形式的输入元素。 显然,我可以使用$(elem).val()来获取新值,但是我是否因为获得之前的值而缺少一个偷偷摸摸的方法? 我没有在jQuery API中看到任何东西来执行此操作,但也许有人已经完成了这个并且有一些提示?
<script>
$(document).ready(function(){
$('#myInputElement').bind('change', function(){
//var oldvalue = ???
var newvalue = $(this).val();
});
});
</script>
<input id="myInputElement" type="text">
我不反对编写我自己的解决方案,我只是想确保我不在这里重新创建轮子。
更好的方法是使用.data存储旧值。 这样可以避免创建一个全局变量,您应该远离该变量并将信息封装在元素中。 一个真实的例子,为什么全局变量是不好的记录在这里
例如
<script>
//look no global needed:)
$(document).ready(function(){
// Get the initial value
var $el = $('#myInputElement');
$el.data('oldVal', $el.val() );
$el.change(function(){
//store new value
var $this = $(this);
var newValue = $this.data('newVal', $this.val());
})
.focus(function(){
// Get the value when input gains focus
var oldValue = $(this).data('oldVal');
});
});
</script>
<input id="myInputElement" type="text">
这可能会成功:
$(document).ready(function() {
$("input[type=text]").change(function() {
$(this).data("old", $(this).data("new") || "");
$(this).data("new", $(this).val());
console.log($(this).data("old"));
console.log($(this).data("new"));
});
});
$('#element').on('change', function() {
$(this).val($(this).prop("defaultValue"));
});
只要焦点离开输入字段(应该按照您想要的那样),就可以将输入字段的值复制到隐藏字段。 见下面的代码:
<script>
$(document).ready(function(){
$('#myInputElement').bind('change', function(){
var newvalue = $(this).val();
});
$('#myInputElement').blur(function(){
$('#myHiddenInput').val($(this).val());
});
});
</script>
<input id="myInputElement" type="text">
(未经测试,但它应该工作)。
每个DOM元素都有一个名为defaultValue的属性。 如果您只想比较第一次更改数据,可以使用它来获取默认值。
在Russ的回答中,他结束了焦点事件。 我觉得没必要。
您可以将旧值存储在change事件中。
<script>
$(document).ready(function(){
var newValue = $('#myInputElement').val();
var oldValue;
$('#myInputElement').change(function(){
oldValue = newValue;
newValue = $(this).val();
});
});
</script>
<input id="myInputElement" type="text">
我根据Joey Guerra的建议创建了这些功能,谢谢你。 我正在详细阐述,也许有人可以使用它。 第一个函数checkDefaults()在输入更改时被调用,第二个函数在使用jQuery.post提交表单时被调用。 div.updatesubmit是我的提交按钮,类'needsupdate'表示已进行更新但尚未提交。
function checkDefaults() {
var changed = false;
jQuery('input').each(function(){
if(this.defaultValue != this.value) {
changed = true;
}
});
if(changed === true) {
jQuery('div.updatesubmit').addClass("needsupdate");
} else {
jQuery('div.updatesubmit').removeClass("needsupdate");
}
}
function renewDefaults() {
jQuery('input').each(function(){
this.defaultValue = this.value;
});
jQuery('div.updatesubmit').removeClass("needsupdate");
}
有些观点。
使用$ .data而不是$ .fn.data
// regular
$(elem).data(key,value);
// 10x faster
$.data(elem,key,value);
然后,您可以通过事件对象获取先前的值,而不会使您的生活复杂化:
$('#myInputElement').change(function(event){
var defaultValue = event.target.defaultValue;
var newValue = event.target.value;
});
请注意,defaultValue不是最后设置的值。 这是该字段初始化的值。 但你可以使用$ .data来跟踪“oldValue”
我建议你总是在事件处理函数中声明“event”对象,并用firebug(console.log(event))或其他东西检查它们。 你会发现很多有用的东西可以帮助你避免创建/访问jquery对象(这很棒,但如果你可以更快......)
我发现了一个肮脏的技巧,但它可以工作,您可以使用悬停功能来获取更改前的值!
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.