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

Question 1

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ę

Question 2

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

Question 3

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>

Question 4

Sugerowałbym:

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

  //we have available old value here;
}

Question 5

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

Question 6

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)

Question 7

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

Question 8

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>

Question 9

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

Question 10

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

Answer 1

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ę

Answer 2

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.

Answer 3

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

Answer 4

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

Answer 5

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.

Answer 6

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

Answer 7

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,

Answer 8

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

Answer 9

2

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

Answer 10

4

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

Ian Kemp

Answer 11

1

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

Gabriel McAdams

Answer 12

6

Sugerowałbym:

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

  //we have available old value here;
}

krsnik
źródło

Answer 13

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

Answer 14

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)

Answer 15

7

Tak, to jest brudne!

Alan Macdonald

Answer 16

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

Answer 17

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>

Answer 18

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

Answer 19

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

Answer 20

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

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

Odpowiedzi: