Jak uzyskać starą wartość za pomocą zdarzenia onchange () w polu tekstowym


85

Mam pole tekstowe i wartość wpisaną w nim podczas ładowania strony. Teraz, jeśli użytkownik zmienia coś w polu tekstowym, chcę uzyskać zmienioną wartość (nową wartość) i starą wartość, ale kiedy robię ELEMENT.value, to podaje tylko zmienioną wartość

jakieś sugestie, aby uzyskać starą wartość?

poniżej jest mój kod

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

Z góry dziękuję

Odpowiedzi:


69

element.defaultValue da ci oryginalną wartość.

Należy pamiętać, że działa to tylko na wartości początkowej.

Jeśli potrzebujesz tego, aby zachować „starą” wartość za każdym razem, gdy się zmieni, właściwość expando lub podobna metoda spełni Twoje potrzeby


tylko uwaga. Odkryłem w firefox, że element.getAttribute ("wartość") również wydaje się ujawniać oryginał ... Nie wiem wystarczająco, aby stwierdzić, czy jest to coś w różnych przeglądarkach / standard.
cheshirekow

47
element.defaultValue zwraca wartość ustawioną w tagu <input>. Jeśli ta wartość uległa zmianie w wyniku edycji lub innego elementu JavaScript, defaultValue nie zwróci tej (nowej) starej wartości.
SabreWolfy

Dzięki SabreWolfy, zauważyłem twój komentarz i rozwiązałem mój problem. Musiałem wielokrotnie zmieniać wartość, więc powyższe nie było dobre.

175

Musisz ręcznie zapisać starą wartość. Można to przechowywać na wiele różnych sposobów. Możesz użyć obiektu javascript do przechowywania wartości dla każdego pola tekstowego lub możesz użyć ukrytego pola (nie polecam tego - zbyt ciężki HTML) lub możesz użyć właściwości expando w samym polu tekstowym, na przykład:

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

Wtedy Twoja funkcja javascript do obsługi zmiany wygląda następująco:

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

24
Rozumiem, że odrzucasz odpowiedź, jeśli to nie zadziała lub jeśli jest to niewłaściwa odpowiedź. Udzieliłem odpowiedzi, która rozwiązała potrzebę użytkownika. Ten kod został przetestowany. To jest kompletne. I robi coś, czego nie akceptuje zaakceptowana odpowiedź (zawsze możesz spojrzeć na właściwość defaultValue, ale co, jeśli użytkownik zmieni wartość więcej niż raz?).
Gabriel McAdams,

Zaproponowana tutaj zmiana jest nieprawidłowa. Po pierwsze, gdy pojawi się alert, pole straciło ostrość. Każda późniejsza zmiana nastąpiłaby po uruchomieniu zdarzenia onfocus. Po drugie, zdarzenie zmiany pola wejściowego nie jest uruchamiane, dopóki nie utraci ostrości.
Gabriel McAdams

2
Działa to lepiej, jeśli wielokrotnie manipulujesz wartością. Powyższa odpowiedź (element.defaultValue) działa tylko raz. W górę tego :)

4
Proste i skuteczne. Chciałbym dać ci więcej niż +1.
Ian Kemp

1
@GrijeshChauhan: Nie. Skupiamy się na starej wartości. Następnie, po każdej zmianie, ustawiamy ją ponownie.
Gabriel McAdams

6

Sugerowałbym:

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

  //we have available old value here;
}

6

Należy używać atrybutów danych HTML5. Możesz tworzyć własne atrybuty i zapisywać w nich różne wartości.


2

Brudną sztuczką, której czasami używam, jest ukrywanie zmiennych w atrybucie `` nazwa '' (którego zwykle nie używam do innych celów):

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

Nieoczekiwanie następuje przesłanie zarówno starej, jak i nowej wartości someFunction(oldValue,newValue)


7
Tak, to jest brudne!
Alan Macdonald

2

Nie jestem pewien, ale może ta logika zadziała.

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

Możesz to zrobić: dodaj atrybut oldvalue do elementu html, dodaj set oldvalue po kliknięciu przez użytkownika. Następnie zdarzenie onchange używa wartości 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>

0

Może możesz zapisać poprzednią wartość pola tekstowego w ukrytym polu tekstowym. Następnie możesz pobrać pierwszą wartość z ukrytego, a ostatnią wartość z samego pola tekstowego. Alternatywa związana z tym, w zdarzeniu onfocus twojego pola tekstowego ustaw wartość twojego pola tekstowego na ukryte pole, a podczas zdarzenia onchange odczytaj poprzednią wartość.


1
Ale jeśli mamy ponad 100 pól tekstowych, w tym przypadku musimy mieć ponad 100 ukrytych zmiennych, więc czy istnieje inny sposób na uzyskanie starych wartości?
CFUser

0

Może możesz spróbować zapisać starą wartość za pomocą zdarzenia „onfocus”, a następnie porównać ją z nową wartością ze zdarzeniem „onfocus”.

Korzystając z naszej strony potwierdzasz, że przeczytałeś(-aś) i rozumiesz nasze zasady używania plików cookie i zasady ochrony prywatności.
Licensed under cc by-sa 3.0 with attribution required.