web-dev-qa-db-ja.com

テキストボックスの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>
</html>

前もって感謝します

javascripthtmlvalidation
76
CFUser

element.defaultValueは元の値を提供します。

これは初期値でのみ機能することに注意してください。

変更するたびに「古い」値を保持するためにこれが必要な場合は、expandoプロパティまたは同様のメソッドがニーズを満たします

67
George

古い値を手動で保存する必要があります。さまざまな方法で保存できます。 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>
158
Gabriel McAdams

HTML5データ属性を使用する必要があります。独自の属性を作成して、それらに異なる値を保存できます。

5
tiwari.vikash

私はお勧めします：

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

  //we have available old value here;
}
4
krsnik

確かではありませんが、おそらくこのロジックは機能するでしょう。

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

私が時々使用する汚いトリックは、「name」属性の変数を隠すことです（私は通常、他の目的には使用しません）：

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

意外なことに、古い値と新しい値の両方がsomeFunction(oldValue,newValue)に送信されます

2
Jon

これを行うには、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>
1
Pham Thai Son

「onfocus」イベントで古い値を保存して、後で「onchange」イベントで新しい値と比較することもできます。

0
ownking

テキストボックスの以前の値を非表示のテキストボックスに保存できます。次に、非表示から最初の値を取得し、テキストボックス自体から最後の値を取得できます。これに関連する代替方法として、テキストボックスのonfocusイベントで、テキストボックスの値を非表示フィールドに設定し、onchangeイベントで前の値を読み取ります。

0
Canavar