如何在文本框中使用 onchange() 事件获取旧值
Posted
技术标签:
【中文标题】如何在文本框中使用 onchange() 事件获取旧值【英文标题】：How to get old Value with onchange() event in text box 【发布时间】：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>
【问题讨论】：
【参考方案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”事件的新值进行比较。
【讨论】：
以上是关于如何在文本框中使用 onchange() 事件获取旧值的主要内容，如果未能解决你的问题，请参考以下文章
反应 Typescript 输入 onChange 事件类型？
文本框 onChange 事件和 Datepicker onSelect 冲突
当用js动态的改变一个输入框中的值后，并不能触发它的onchange事件why?
如何使用 CKEditor 和 React JS 捕获 OnChange 事件