web-dev-qa-db-ja.com

javascriptを使用して古い値をキャプチャし、キャンセル時に元に戻す方法

onChangeイベントで関数を呼び出すテキストフィールドがあります。そのテキストフィールドの値が変更されたときに、ここに確認ウィンドウをスローしています。 （確認ウィンドウで）キャンセルをクリックすると、古い値をテキストフィールドに戻す必要があります。 [続行]または[OK]をクリックすると、新しい値が保持されます。私は長い間これを試してきましたが、古い値を保持することができません。

例：onchangeの前は、テキストフィールドのval = 'first'; onChangeイベント、valが「second」に変更され、ウィンドウが開くことを確認します。「ok」を選択したテキストフィールドにはsecondが必要であり、cancelを選択した場合は「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;
    }
    }

}
javascriptonchange
5
Anuj Balan

フォームコントロールには、（驚くべきことに）デフォルト値であるdefaultValueプロパティがあることに注意してください。このプロパティを使用して、入力の前の値を格納したり、値を前の値に戻したりすることができます。

したがって、与えられた提案をまとめると、次の関数は要素への参照を渡され、ユーザーに現在の値を保持するかどうかを尋ねます。はいと答えた場合、入力のdefaultValueは現在のvalueに設定されます。ユーザーが「いいえ」（つまりキャンセル）と言った場合、値はデフォルト値にリセットされます。

このアプローチでは、入力の元のvalueが上書きされるため、フォームをリセットすると、入力のvalueが現在の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);">

このアプローチは、同じページとフォーム内の任意の数の入力に対して機能します。

17
RobG

最後の値を追跡するためにクロージャを使用します。

(function(){ 
    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.value = oldValue;
            return false;
        } else {
            oldValue = this.value;
        }
    };
})();
6
Adam Rackis