javascript - 如何使用javascript捕获旧值并将其设置回取消

Question

我有一个文本字段，我从中调用 onChange 事件的函数。当该文本字段中的值更改时，我会在此处抛出一个确认窗口。如果单击取消(在确认窗口中)，则必须将旧值设置回文本字段。如果单击继续或确定，则应保留新值。 我已经尝试了很长时间，但无法保留旧值。

例如: 在 onchange 之前，文本字段中的 val ='first'; onChange 事件，val 更改为“second”，确认窗口打开，如果确定，所选文本字段应有第二个，如果选择取消，“first”应出现在文本字段中。

function onChangeOfValue(input){
    //var oldValue = document.getElementById(input).value;
    document.getElementById(input).onchange = function(){
    var newValue = this.value;
    alert("newVal is--->"+newValue);
    if(document.getElementById(input) != null && document.getElementById(input) != '' 
    && !confirm("Do you want to continue?")){

    // this.input=oldValue;
        return false;
    }
    }

}

Answer 1

请注意，表单控件有一个 defaultValue 属性，它是默认值(令人惊讶)。您可以使用此属性来存储输入的先前值，或将值返回到先前的值。

因此，将您得到的建议放在一起，将向以下函数传递对元素的引用，并询问用户是否要保留当前值。如果他们回答是，则输入的默认值 设置为当前值。如果用户拒绝(即取消)，则值将重置为默认值。

请注意，此方法将覆盖输入的原始值，因此如果您重置表单，输入的值 将重置为当前的默认值.

<script>
function onChangeOfValue(element) {
  var oldValue = element.defaultValue;
  var newValue = element.value;
  if (window.confirm('do you really want to change the value to ' + newValue + '?')) {
    element.defaultValue = newValue;
  } else {
    element.value = element.defaultValue;
  } 
}
</script>

<input onchange="onChangeOfValue(this);">

此方法适用于同一页面和表单中的任意数量的输入。