如何在文本框中使用onchange（）事件获取旧值

85

页面加载时，我有一个文本框和一个值填充在其中。现在，如果用户在文本框中更改任何内容，那么我想获取更改后的值（新值）和旧值，但是当我执行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>
</html>

提前致谢

javascript html validation

— CFUser
source

69

element.defaultValue 将为您带来原始价值。

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

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

— 乔治
source

只是一个笔记。我在Firefox上发现了element.getAttribute（“ value”）似乎也揭示了原始内容...我不知道这是否是跨浏览器/标准的东西。

— cheshirekow

47

element.defaultValue返回在<input>标记中设置的值。如果此值已通过编辑或其他JavaScript更改，则element，defaultValue将不会返回此（新）旧值。

— SabreWolfy 2012年

感谢SabreWolfy，发现了您的评论并解决了我的问题。必须多次更改值，因此执行上述操作无济于事。

175

您需要手动存储旧值。您可以用很多不同的方式存储它。您可以使用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>

— 加布里埃尔·麦克亚当斯
source

24

如果您认为答案不可行或答案不合适，我可以理解。我提供了解决用户需求的答案。此代码已经过测试。完成了而且它所做的事情是公认的答案所没有的（您可以始终查看defaultValue属性，但是如果用户多次更改该值怎么办？）。

— 加布里埃尔·麦卡丹斯

此处建议的更改不正确。首先，一旦发生警报，该领域就会失去焦点。此后的任何更改都将在触发onfocus事件后发生。其次，输入字段的onchange事件在失去焦点之前不会触发。

— 加布里埃尔·麦克亚当斯

2

如果您多次操作该值，则效果更好。上面的答案（element.defaultValue）仅工作一次。上一个：)

4

简单有效。希望我能给您更多+1。

— 伊恩·坎普

1

@GrijeshChauhan：不。我们将旧值放在焦点上。之后，每次更改后，我们都要重新设置。

— 加布里埃尔·麦克亚当斯2014年

6

我会建议：

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

  //we have available old value here;
}

— 克尔斯尼克
source

6

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

— 提瓦里·维卡什
source

2

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

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

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

— 乔恩
source

7

是的，那很脏！

— 艾伦·麦克唐纳

2

我不确定，但是这种逻辑可能行得通。

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);
*/

— 曼吉特
source

2

您可以执行以下操作：将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>

— 范泰国儿子
source

0

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

— 卡纳瓦
source

1

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

— CFUser

0

也许您可以尝试通过“ onfocus”事件保存旧值，然后再通过“ onchange”事件将其与新值进行比较。

— 独有的
source