<input> 元素上的 jQuery Change 事件 - 有啥方法可以保留以前的值？

Posted 2023-03-05

【中文标题】<input> 元素上的 jQuery Change 事件 - 有啥方法可以保留以前的值？

【英文标题】：jQuery Change event on an <input> element - any way to retain previous value?<input> 元素上的 jQuery Change 事件 - 有什么方法可以保留以前的值？

【发布时间】：2010-11-12 15:25:42

【问题描述】：

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

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

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

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

【参考方案1】：

更好的方法是使用 .data 存储旧值。这可以避免创建一个您应该远离的全局变量，并将信息封装在元素中。 here

记录了一个关于为什么 Global Vars 不好的真实世界示例

例如

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

【讨论】：

我每天都在学习关于 jQuery 的新知识……这是我第一次看到 .data()，所以我今天一定会阅读更多相关内容。

@redsquare - 完全忘记了 .data() - 很好！

@redsquare：我不知道 .data。非常好:)

不正确，即使是 MS 也会在其中渲染全局变量 ms ajax 脚本，当人们碰巧将他们的控件命名为与全局变量相同的名称时，这些脚本可以捕捉到他们。 Def不是一个没有经验的唯一问题

@redsquare：这很好，但看起来有些逻辑不太正确。 .data('oldVal') 仅在页面加载时设置，之后再也不设置。可能在change 或focus 事件中应该类似于$(this).data('oldVal', $(this).val())？

【参考方案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

【讨论】：

我喜欢这个解决方案，但它缺少一件事：如果值被其他 javascript 代码更改（如我的情况），或者如果您第一次需要旧值，则此代码将不起作用.您需要在 html 中添加 <input data-new="initialValue" />，并且必须在每次操作时覆盖此值。

【参考方案3】：

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

【讨论】：

最简单的方法 - 应该有更多的选票。见：***.com/questions/5244466/…

没错，这应该是公认的答案：w3schools.com/jsref/prop_text_defaultvalue.asp

根据我对previous value的理解，这是不正确的。 defaultValue 是在页面加载时设置的。以前的值（根据我的理解）是控件在更改之前的值。如果默认值为 1 且用户键入 2，然后将其更改为 3，则 previous value 将为 2。

【参考方案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">

（未经测试，但应该可以）。

【讨论】：

这不是一个坏主意...我得测试一下。我想知道绑定和模糊事件是否每次都以相同的顺序触发......如果是这样，那可能会起作用。或者，我可以使用焦点事件，以便在元素获得焦点时存储该值。然后在更改时，我有旧值和新值......我会做一些测试，看看我能想出什么。

我做了一些测试，焦点方法效果很好。感谢你们俩的想法/样本！

【参考方案5】：

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

【参考方案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">

【讨论】：

Daniel，这样做的问题是您只能获得一次旧值。因为我的表单通过 web 服务 (ajax) 提交，所以文档只加载一次，但表单值可以更改 N 次。通过使用 focus 方法，我可以保证获取新的输入值。

哦，实际上 - 我明白你在做什么......我的错误。是的，这也行。

【参考方案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”

我建议您始终在事件处理函数中声明“事件”对象，并使用 firebug (console.log(event)) 或其他方式检查它们。你会在那里找到很多有用的东西，可以让你免于创建/访问 jquery 对象（这很棒，但如果你能更快......）

【参考方案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");

【参考方案9】：

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

【讨论】：

如果用户使用键盘进入输入框，那就不行了。

使用focus怎么样？应该同时捕获鼠标和键盘