如何在文本框中获取具有 onchange()事件的旧值

我有一个文本输入。当页面加载时，一个值被填充到其中。如果用户更改了文本框中的任何内容，那么我希望得到更改后的值(新值)和旧值。但是调用 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>
270855 次浏览
小开

Maybe you can store the previous value of the textbox into a hidden textbox. Then you can get the first value from hidden and the last value from textbox itself. An alternative related to this, at onfocus event of your textbox set the value of your textbox to an hidden field and at onchange event read the previous value.

小开
最佳答案

element.defaultValue will give you the original value.

Please note that this only works on the initial value.

If you are needing this to persist the "old" value every time it changes, an expando property or similar method will meet your needs

小开

You'll need to store the old value manually. You could store it a lot of different ways. You could use a javascript object to store values for each textbox, or you could use a hidden field (I wouldn't recommend it - too html heavy), or you could use an expando property on the textbox itself, like this:

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

Then your javascript function to handle the change looks like this:

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

Maybe you can try to save the old value with the "onfocus" event to afterwards compare it with the new value with the "onchange" event.

小开

I would suggest:

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


//we have available old value here;
}
小开

A dirty trick I somtimes use, is hiding variables in the 'name' attribute (that I normally don't use for other purposes): 

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

Somewhat unexpectedly, both the old and the new value is then submitted to someFunction(oldValue,newValue)

小开

You should use HTML5 data attributes. You can create your own attributes and save different values in them.

小开

I am not sure, but maybe this logic would work.

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

You can do this: add oldvalue attribute to html element, add set oldvalue when user click. Then onchange event use 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>
小开

Probably not the best solution, but as a workaround, tried in ReactJS with Material-UI (MUI). For a text input and using the onChange method, the initial value gets stored into:

event.srcElement._wrapperState.initialValue

And the previous value gets stored into:

event.target.attributes.value.value

The new value can be extracted as standard from:

event.target.value

提交答案