如何在文本框中使用 onchange() 事件获取旧值答案

【问题标题】：How to get old Value with onchange() event in text box如何在文本框中使用 onchange() 事件获取旧值
【发布时间】：2010-12-26 23:16:07
【问题描述】：

我有一个文本输入。页面加载时会填充一个值。如果用户在文本框中更改了任何内容，那么我想获取更改后的值（新值）和旧值。但是调用 ELEMENT.value 它只返回更改/新值。

如何获得旧值？

这是我的代码：

      <head>
        <script type="text/javascript">
          function onChangeTest(changeVal) {
            alert("Value is " + changeVal.value);
          }
        </script>
      </head>
      <body>
        <form>
          <div>
              <input type="text" id="test" value ="ABS" onchange="onChangeTest(this)">  
          </div>
        </form>
      </body>

【问题讨论】：

标签： javascript html validation

【解决方案1】：

您需要手动存储旧值。你可以用很多不同的方式来存储它。您可以使用 javascript 对象来存储每个文本框的值，或者您可以使用隐藏字段（我不推荐它 - html 太重），或者您可以在文本框本身上使用 expando 属性，如下所示：

<input type="text" onfocus="this.oldvalue = this.value;" onchange="onChangeTest(this);this.oldvalue = this.value;" />

那么你处理变化的 javascript 函数如下所示：

    <script type="text/javascript">
    function onChangeTest(textbox) {
        alert("Value is " + textbox.value + "\n" + "Old Value is " + textbox.oldvalue);
    }
    </script>

【讨论】：

我可以理解，如果答案不起作用或答案不合适，您会否决答案。我提供了一个解决用户需求的答案。此代码经过测试。它是完整的。它做了一些公认的答案没有做的事情（你总是可以查看 defaultValue 属性，但是如果用户多次更改值怎么办？）。
此处建议的更改不正确。首先，一旦发生警报，该字段就会失去焦点。之后的任何更改都将在 onfocus 事件被触发后发生。其次，输入字段的 onchange 事件在失去焦点之前不会触发。
如果您多次操纵该值，这会更好。上面的答案（element.defaultValue）只适用一次。上这个:)
简单有效。希望我能给你超过 +1。
@GrijeshChauhan：不。我们将旧值设置为焦点。之后，每次更改后，我们都会重新设置。

【解决方案2】：

element.defaultValue 会给你原始值。

请注意，这只适用于初始值。

如果您需要在每次更改时保留“旧”值，expando 属性或类似方法将满足您的需求

【讨论】：

只是一个注释。我在 firefox element.getAttribute("value") 上发现似乎也揭示了原始......我不知道这是否是跨浏览器/标准的东西。
element.defaultValue 返回标签中设置的值。如果此值已通过编辑或其他一些 JavaScript 更改，element,defaultValue 将不会返回此（新）旧值。
感谢 SabreWolfy，发现您的评论并解决了我的问题。必须多次更改该值，因此上述操作并不好。

【解决方案3】：

您应该使用 HTML5 数据属性。您可以创建自己的属性并在其中保存不同的值。

【讨论】：

【解决方案4】：

我建议：

function onChange(field){
  field.old=field.recent;
  field.recent=field.value;

  //we have available old value here;
}

【讨论】：

【解决方案5】：

我有时使用的一个肮脏的技巧是在“名称”属性中隐藏变量（我通常不会将其用于其他目的）：

select onFocus=(this.name=this.value) onChange=someFunction(this.name,this.value)><option...

出乎意料的是，旧值和新值随后都提交给someFunction(oldValue,newValue)

【讨论】：

这对我来说很好用：` onFocus="this.oldValue = this.value;"` 来自：pretagteam.com/question/…（是的，距离你回答这个问题已经十年了）

【解决方案6】：

您可以这样做：将 oldvalue 属性添加到 html 元素，当用户单击时添加 set oldvalue。然后 onchange 事件使用 oldvalue。

<input type="text" id="test" value ="ABS" onchange="onChangeTest(this)" onclick="setoldvalue(this)" oldvalue="">

<script>
function setoldvalue(element){
   element.setAttribute("oldvalue",this.value);
}

function onChangeTest(element){
   element.setAttribute("value",this.getAttribute("oldvalue"));
}
</script>

【讨论】：

【解决方案7】：

我不确定，但也许这个逻辑会起作用。

var d = 10;
var prevDate = "";
var x = 0;
var oldVal = "";
var func = function (d) {
    if (x == 0 && d != prevDate && prevDate == "") {
        oldVal = d;
        prevDate = d;
    }
    else if (x == 1 && prevDate != d) {
        oldVal = prevDate;
        prevDate = d;
    }
    console.log(oldVal);
    x = 1;
};
/*
         ============================================
         Try:
         func(2);
         func(3);
         func(4);
*/

【讨论】：

【解决方案8】：

也许您可以将文本框的先前值存储到隐藏的文本框中。然后你可以从隐藏的第一个值和文本框本身的最后一个值。与此相关的另一种方法是，在文本框的 onfocus 事件中将文本框的值设置为隐藏字段，并在 onchange 事件中读取前一个值。

【讨论】：

但是，如果我们有大约 100+ 个文本框，在这种情况下我们需要有 100+ 个隐藏变量，那么有没有其他方法可以获得旧值？

【解决方案9】：

也许您可以尝试使用“onfocus”事件保存旧值，然后将其与带有“onchange”事件的新值进行比较。

【讨论】：