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ę

javascript html validation

— CFUser
źródło

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

— Jerzy
źródło

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>

— Gabriel McAdams
źródło

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

— krsnik
źródło

6

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

— tiwari.vikash
źródło

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)

— Jon
źródło

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

— Manjeet
źródło

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>

— Pham Thai Son
źródło

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ść.

— Canavar
źródło

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

— ownking
źródło