Demo here

Question

我今天早上一直在搜索，我找不到任何简单的解决方案......基本上，我想捕获输入元素的变化，但也知道之前的值。

这是一个更改事件和最简单形式的输入元素。显然，我可以使用$（elem）.val（）来获取新值，但是我是否因为获得之前的值而缺少一个偷偷摸摸的方法？我没有在jQuery API中看到任何内容来执行此操作，但也许某人已经完成了此操作并提供了一些提示？

<script>
    $(document).ready(function(){
        $('#myInputElement').bind('change', function(){
            //var oldvalue = ???
            var newvalue = $(this).val();
        });
    });
</script>
<input id="myInputElement" type="text">

我不反对编写我自己的解决方案，我只是想确保我不在这里重新创建方向盘。

Answer 1

更好的方法是使用.data存储旧值。这样可以避免创建一个全局变量，您应该远离该变量并将信息封装在元素中。关于Global Vars为什么不好的真实例子记录在here

e.g

<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">

Answer 2

这可能会起到作用：

$(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"));
    });
});

Demo here

Answer 3

$('#element').on('change', function() {
    $(this).val($(this).prop("defaultValue"));
});

Answer 4

每当焦点离开输入字段（应该按照您想要的那样）时，您可以将输入字段的值复制到隐藏字段。请参阅以下代码：

<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">

（未经测试，但它应该有效）。

Answer 5

每个DOM元素都有一个名为defaultValue的属性。如果您只想比较第一次更改数据，可以使用它来获取默认值。

Answer 6

在Russ的回答中，他对焦点事件有所约束。我觉得没必要。

您可以将旧值存储在更改事件中。

<script>
    $(document).ready(function(){

        var newValue = $('#myInputElement').val();
        var oldValue;

        $('#myInputElement').change(function(){
            oldValue = newValue;
            newValue = $(this).val();
        });
    });
</script>
<input id="myInputElement" type="text">

Answer 7

有些观点。

使用$ .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对象（这很棒，但如果你可以更快......）

Answer 8

我根据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");
}

Answer 9

我发现了一个肮脏的技巧，但它有效，您可以使用悬停功能在更改前获取值！

<input />元素上的jQuery Change事件 - 保留以前值的任何方式？

9 个答案:

Demo here