Metin kutusunda onchange () olayıyla eski değer nasıl elde edilir

88

Bir metin Kutum ve sayfa yüklendiğinde içinde doldurulmuş bir Değer var. Şimdi, eğer kullanıcı metin kutusunda herhangi bir şeyi değiştirirse, o zaman Değiştirilen Değeri (Yeni Değer) ve Eski Değeri almak istiyorum, ancak ELEMENT.value yaptığımda sadece değiştirilmiş Değer veriyor

Eski değeri elde etmek için herhangi bir Öneriniz var mı?

benim kodum aşağıdadır

<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>

Şimdiden teşekkürler

javascript html validation

— CFUser
kaynak

70

element.defaultValue size orijinal değeri verecektir.

Lütfen bunun yalnızca başlangıç değerinde çalıştığını unutmayın.

Her değiştiğinde "eski" değeri korumak için buna ihtiyacınız varsa, bir expando özelliği veya benzer bir yöntem ihtiyaçlarınızı karşılayacaktır.

— George
kaynak

sadece bir not. Firefox'ta keşfettim element.getAttribute ("value") da orijinali ortaya çıkarıyor ... Bunun tarayıcılar arası / standart bir şey olup olmadığını söyleyecek kadar bilgim yok.

— cheshirekow

48

element.defaultValue, <input> etiketinde ayarlanan değeri döndürür. Bu değer, düzenleyerek veya başka bir JavaScript, element ile değiştirilmişse, defaultValue bu (yeni) eski değeri döndürmez.

— SabreWolfy

Teşekkürler SabreWolfy, yorumunuzu fark etti ve sorunumu çözdü. Değeri birkaç kez değiştirmek zorunda kaldı, bu yüzden yukarıdakileri yapmak işe yaramadı.

179

Eski değeri manuel olarak kaydetmeniz gerekecek. Pek çok farklı şekilde saklayabilirsiniz. Her bir metin kutusu için değerleri depolamak için bir javascript nesnesi veya gizli bir alan kullanabilirsiniz (bunu önermem - çok html ağır) veya metin kutusunun kendisinde aşağıdaki gibi bir expando özelliği kullanabilirsiniz:

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

Ardından, değişikliği işleyecek javascript işleviniz aşağıdaki gibi görünür:

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

— Gabriel McAdams
kaynak

25

İşe yaramazsa veya uygunsuz bir cevapsa bir yanıtı oylamanızı anlayabiliyorum. Kullanıcının ihtiyacını çözen bir cevap verdim. Bu kod test edildi. Tamamlandı. Ve kabul edilen cevabın yapmadığı bir şeyi yapar (her zaman defaultValue özelliğine bakabilirsiniz, ancak kullanıcı değeri birden çok kez değiştirirse ne olur?).

— Gabriel McAdams

Burada önerilen değişiklik yanlıştır. Her şeyden önce, bir uyarı oluştuğunda, alan odak noktasını kaybetmiştir. Onfocus olayı tetiklendikten sonra bundan sonraki herhangi bir değişiklik meydana gelir. İkincisi, giriş alanının onchange olayı odak kaybolana kadar çalışmaz.

— Gabriel McAdams

2

Değeri birden çok kez değiştiriyorsanız bu daha iyi sonuç verir. Yukarıdaki cevap (element.defaultValue) yalnızca bir kez işe yarar. Bu kadar :)

4

Basit ve etkili. Keşke sana + 1'den fazlasını verebilseydim.

— Ian Kemp

1

@GrijeshChauhan: Hayır. Odaklanmaya eski değeri koyuyoruz. Bundan sonra, her değişiklikten sonra tekrar ayarlıyoruz.

— Gabriel McAdams

6

Öneririm:

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

  //we have available old value here;
}

— krsnik
kaynak

6

HTML5 veri özelliklerini kullanmalısınız. Kendi niteliklerinizi oluşturabilir ve bunlara farklı değerler kaydedebilirsiniz.

— tiwari.vikash
kaynak

2

Bazen kullandığım kirli bir numara, değişkenleri 'isim' özniteliğinde saklamaktır (normalde başka amaçlar için kullanmıyorum):

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

Biraz beklenmedik bir şekilde, hem eski hem de yeni değer daha sonra someFunction(oldValue,newValue)

— Jon
kaynak

2

Emin değilim ama belki bu mantık işe yarayabilir.

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

— Manjeet
kaynak

2

Bunu yapabilirsiniz: html öğesine oldvalue özniteliği ekleyin, kullanıcı tıkladığında set oldvalue ekleyin. Onchange olayı eski değeri kullanır.

<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>

— Pham Tay Oğlu
kaynak

0

Belki metin kutusunun önceki değerini gizli bir metin kutusunda saklayabilirsiniz. Ardından ilk değeri gizli'den ve son değeri metin kutusunun kendisinden alabilirsiniz. Bununla ilgili bir alternatif, metin kutunuzun onfocus olayında metin kutunuzun değerini gizli bir alana ayarlayın ve onchange olayında önceki değeri okuyun.

— Canavar
kaynak

1

Ancak, eğer 100'den fazla metin kutumuz varsa, bu durumda 100'den fazla gizli değişkene ihtiyacımız var, Öyleyse eski değerleri almanın başka bir yolu var mı?

— CFUser

0

Belki eski değeri "onfocus" olayıyla kaydetmeyi deneyebilir ve daha sonra bunu "onchange" olayıyla yeni değerle karşılaştırabilirsiniz.

— sahiplik
kaynak