So erhalten Sie einen alten Wert mit dem Ereignis onchange () im Textfeld

83

Ich habe ein Textfeld und einen Wert, der beim Laden der Seite ausgefüllt wird. Wenn der Benutzer etwas im Textfeld ändert, möchte ich den geänderten Wert (neuer Wert) und den alten Wert abrufen. Wenn ich jedoch ELEMENT.value ausführe, wird nur der geänderte Wert angegeben

Irgendwelche Vorschläge, um alten Wert zu bekommen?

Unten ist mein Code

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

Danke im Voraus

javascript html validation

— CFUser
quelle

69

element.defaultValue gibt Ihnen den ursprünglichen Wert.

Bitte beachten Sie, dass dies nur beim Anfangswert funktioniert.

Wenn Sie dies benötigen, um den "alten" Wert bei jeder Änderung beizubehalten, entspricht eine expando-Eigenschaft oder eine ähnliche Methode Ihren Anforderungen

— George
quelle

nur eine Notiz. Ich entdeckte auf Firefox element.getAttribute ("Wert") scheint auch das Original zu enthüllen ... Ich weiß nicht genug, um zu sagen, ob dies eine browser- / standardübergreifende Sache ist.

— Cheshirekow

46

element.defaultValue gibt den im <input> -Tag festgelegten Wert zurück. Wenn sich dieser Wert durch Bearbeiten oder ein anderes JavaScript-Element geändert hat, gibt defaultValue diesen (neuen) alten Wert nicht zurück.

— SabreWolfy

Danke SabreWolfy, habe deinen Kommentar entdeckt und mein Problem gelöst. Musste den Wert mehrmals ändern, so war es nicht gut, das oben genannte zu tun.

173

Sie müssen den alten Wert manuell speichern. Sie können es auf viele verschiedene Arten speichern. Sie könnten ein Javascript-Objekt verwenden, um Werte für jedes Textfeld zu speichern, oder Sie könnten ein verstecktes Feld verwenden (ich würde es nicht empfehlen - zu html-schwer), oder Sie könnten eine expando-Eigenschaft für das Textfeld selbst verwenden, wie folgt:

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

Dann sieht Ihre Javascript-Funktion zur Handhabung der Änderung folgendermaßen aus:

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

— Gabriel McAdams
quelle

24

Ich kann verstehen, dass Sie eine Antwort ablehnen, wenn sie nicht funktioniert oder wenn sie eine unangemessene Antwort ist. Ich gab eine Antwort, die die Bedürfnisse des Benutzers löste. Dieser Code wurde getestet. Es ist vollständig. Und es tut etwas, was die akzeptierte Antwort nicht tut (Sie können immer die defaultValue-Eigenschaft anzeigen, aber was ist, wenn der Benutzer den Wert mehr als einmal ändert?).

— Gabriel McAdams

Die hier vorgeschlagene Änderung ist falsch. Erstens hat das Feld nach dem Auftreten einer Warnung den Fokus verloren. Jede Änderung danach würde erfolgen, nachdem das Onfocus-Ereignis ausgelöst wurde. Zweitens wird das Änderungsereignis des Eingabefelds erst ausgelöst, wenn der Fokus verloren geht.

— Gabriel McAdams

2

Dies funktioniert besser, wenn Sie den Wert mehrmals bearbeiten. Die obige Antwort (element.defaultValue) funktioniert nur einmal. Up this :)

4

Einfach und effektiv. Ich wünschte, ich könnte dir mehr als +1 geben.

— Ian Kemp

1

@GrijeshChauhan: Nein. Wir setzen den alten Wert auf Fokus. Danach setzen wir es nach jeder Änderung erneut ein.

— Gabriel McAdams

6

Ich würde vorschlagen:

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

  //we have available old value here;
}

— krsnik
quelle

5

Sie sollten HTML5-Datenattribute verwenden. Sie können Ihre eigenen Attribute erstellen und darin verschiedene Werte speichern.

— tiwari.vikash
quelle

2

Ein schmutziger Trick, den ich manchmal benutze, ist das Ausblenden von Variablen im Attribut 'name' (das ich normalerweise nicht für andere Zwecke verwende):

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

Etwas unerwartet wird dann sowohl der alte als auch der neue Wert übergeben someFunction(oldValue,newValue)

— Jon
quelle

7

Ja das ist dreckig!

— Alan Macdonald

2

Ich bin nicht sicher, aber vielleicht würde diese Logik funktionieren.

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
quelle

2

Sie können dies tun: Fügen Sie dem HTML-Element das Attribut oldvalue hinzu, fügen Sie beim Klicken des Benutzers den Wert oldvalue hinzu. Verwenden Sie dann bei einem Änderungsereignis den alten Wert.

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

0

Möglicherweise können Sie den vorherigen Wert des Textfelds in einem versteckten Textfeld speichern. Dann können Sie den ersten Wert aus versteckt und den letzten Wert aus dem Textfeld selbst abrufen. Eine Alternative dazu: Setzen Sie beim onfocus-Ereignis Ihres Textfelds den Wert Ihres Textfelds auf ein ausgeblendetes Feld und lesen Sie beim onchange-Ereignis den vorherigen Wert.

— Canavar
quelle

1

Wenn wir jedoch mehr als 100 Textfelder haben, müssen wir in diesem Fall mehr als 100 versteckte Variablen haben. Gibt es also eine andere Möglichkeit, alte Werte zu erhalten?

— CFUser

0

Vielleicht können Sie versuchen, den alten Wert mit dem Ereignis "onfocus" zu speichern, um ihn anschließend mit dem neuen Wert mit dem Ereignis "onchange" zu vergleichen.

— Ownking
quelle