Come ottenere il vecchio valore con l'evento onchange () nella casella di testo

88

Ho una casella di testo e un valore inseriti in essa quando viene caricata la pagina. Ora, se l'utente cambia qualsiasi cosa nella casella di testo, voglio ottenere il valore modificato (nuovo valore) e il vecchio valore ma quando faccio ELEMENT.value allora dà solo il valore modificato

qualche suggerimento per ottenere il vecchio valore?

di seguito è il mio codice

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

Grazie in anticipo

javascript html validation

— CFUser
fonte

70

element.defaultValue ti darà il valore originale.

Si noti che questo funziona solo sul valore iniziale.

Se hai bisogno di questo per rendere persistente il valore "vecchio" ogni volta che cambia, una proprietà expando o un metodo simile soddisferà le tue esigenze

— Giorgio
fonte

solo una nota. Ho scoperto su firefox element.getAttribute ("value") che sembra rivelare anche l'originale ... Non ne so abbastanza per dire se si tratta di una cosa cross-browser / standard.

— cheshirekow

48

element.defaultValue restituisce il valore impostato nel tag <input>. Se questo valore è cambiato modificando o qualche altro elemento JavaScript, defaultValue non restituirà questo (nuovo) vecchio valore.

— SabreWolfy

Grazie SabreWolfy, ho notato il tuo commento e ha risolto il mio problema. Ho dovuto modificare il valore più volte, quindi fare quanto sopra non è stato positivo.

179

Dovrai memorizzare manualmente il vecchio valore. Puoi memorizzarlo in molti modi diversi. Potresti usare un oggetto javascript per memorizzare i valori per ogni casella di testo, oppure potresti usare un campo nascosto (non lo consiglierei - troppo pesante html), oppure potresti usare una proprietà expando sulla casella di testo stessa, come questa:

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

Quindi la tua funzione javascript per gestire la modifica ha questo aspetto:

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

— Gabriel McAdams
fonte

25

Posso capire che stai votando una risposta se non funziona o se è una risposta inappropriata. Ho fornito una risposta che ha risolto il bisogno dell'utente. Questo codice è stato testato. È completo. E fa qualcosa che la risposta accettata non fa (puoi sempre guardare la proprietà defaultValue, ma cosa succede se l'utente cambia il valore più di una volta?).

— Gabriel McAdams

La modifica suggerita qui non è corretta. Prima di tutto, una volta che si verifica un avviso, il campo ha perso il focus. Qualsiasi modifica successiva si verificherà dopo che l'evento onfocus è stato attivato. In secondo luogo, l'evento onchange del campo di input non si attiva finché non ha perso il focus.

— Gabriel McAdams

2

Funziona meglio se stai manipolando il valore più volte. La risposta sopra (element.defaultValue) funziona solo una volta. Su questo :)

4

Semplice ed efficace. Vorrei poterti dare più di +1.

— Ian Kemp

1

@GrijeshChauhan: No. Stiamo impostando il vecchio valore sulla messa a fuoco. Dopodiché, dopo ogni modifica, lo impostiamo di nuovo.

— Gabriel McAdams

6

Io suggerirei:

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

  //we have available old value here;
}

— krsnik
fonte

6

Dovresti utilizzare attributi di dati HTML5. È possibile creare i propri attributi e salvare in essi valori diversi.

— tiwari.vikash
fonte

2

Un trucco sporco che uso a volte è nascondere le variabili nell'attributo 'nome' (che normalmente non uso per altri scopi):

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

Un po 'inaspettatamente, vengono quindi sottoposti sia il vecchio che il nuovo valore someFunction(oldValue,newValue)

— Jon
fonte

2

Non ne sono sicuro, ma forse questa logica potrebbe funzionare.

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
fonte

2

Puoi farlo: aggiungi l'attributo oldvalue all'elemento html, aggiungi set oldvalue quando l'utente fa clic. Quindi l'evento onchange usa 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
fonte

0

Forse puoi memorizzare il valore precedente della casella di testo in una casella di testo nascosta. Quindi puoi ottenere il primo valore da nascosto e l'ultimo valore dalla casella di testo stessa. Un'alternativa correlata a questo, all'evento onfocus della tua casella di testo imposta il valore della tua casella di testo su un campo nascosto e all'evento onchange leggi il valore precedente.

— Canavar
fonte

1

Ma, se abbiamo più di 100 caselle di testo, in questo caso abbiamo bisogno di più di 100 variabili nascoste, quindi c'è un altro modo per ottenere vecchi valori?

— CFUser

0

Forse puoi provare a salvare il vecchio valore con l'evento "onfocus" per poi confrontarlo con il nuovo valore con l'evento "onchange".

— possedere
fonte