Cómo obtener el valor antiguo con el evento onchange () en el cuadro de texto

85

Tengo un cuadro de texto y un valor en él cuando se carga la página. Ahora, si el usuario cambia algo en el cuadro de texto, entonces quiero obtener el valor cambiado (valor nuevo) y el valor anterior, pero cuando hago ELEMENT.value, solo se obtiene el valor cambiado

¿Alguna sugerencia para obtener un valor antiguo?

a continuación está mi código 

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

Gracias por adelantado

javascript html validation CFUser
fuente

Respuestas:

69

element.defaultValue le dará el valor original.

Tenga en cuenta que esto solo funciona con el valor inicial.

Si necesita esto para conservar el valor "anterior" cada vez que cambia, una propiedad expando o un método similar satisfará sus necesidades.

Jorge
fuente
solo una nota. Descubrí en firefox element.getAttribute ("value") también parece revelar el original ... No sé lo suficiente como para saber si esto es algo entre navegadores / estándar.
cheshirekow
47
element.defaultValue devuelve el valor establecido en la etiqueta <input>. Si este valor ha cambiado mediante la edición o algún otro elemento de JavaScript, defaultValue no devolverá este (nuevo) valor anterior.
SabreWolfy
Gracias SabreWolfy, vi tu comentario y resolví mi problema. Tuve que cambiar el valor varias veces, por lo que hacer lo anterior no fue bueno.
175

Deberá almacenar el valor anterior manualmente. Puede almacenarlo de muchas formas diferentes. Podría usar un objeto javascript para almacenar valores para cada cuadro de texto, o podría usar un campo oculto (no lo recomendaría, demasiado html pesado), o podría usar una propiedad expando en el cuadro de texto, como este:

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

Entonces su función de javascript para manejar el cambio se ve así:

    <script type="text/javascript">
    function onChangeTest(textbox) {
        alert("Value is " + textbox.value + "\n" + "Old Value is " + textbox.oldvalue);
    }
    </script>
Gabriel McAdams
fuente
24
Puedo entender que rechace una respuesta si no funciona o si es una respuesta inapropiada. Proporcioné una respuesta que resolvió la necesidad del usuario. Este código fue probado. Está completo. Y hace algo que la respuesta aceptada no hace (siempre puede mirar la propiedad defaultValue, pero ¿qué pasa si el usuario cambia el valor más de una vez?).
Gabriel McAdams
El cambio que se sugirió aquí es incorrecto. En primer lugar, una vez que se produce una alerta, el campo pierde el foco. Cualquier cambio después de eso ocurriría después de que se disparara el evento onfocus. En segundo lugar, el evento onchange del campo de entrada no se activa hasta que se pierde el foco.
Gabriel McAdams
2
Esto funciona mejor si está manipulando el valor varias veces. La respuesta anterior (element.defaultValue) solo funciona una vez. Hasta este :)
4
Simple y eficaz. Ojalá pudiera darte más de +1.
Ian Kemp
1
@GrijeshChauhan: No. Estamos enfocando el valor anterior. Después de eso, después de cada cambio, lo configuramos nuevamente.
Gabriel McAdams
6

Yo sugeriría:

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

  //we have available old value here;
}
krsnik
fuente
6

Debe utilizar atributos de datos HTML5. Puede crear sus propios atributos y guardar diferentes valores en ellos.

tiwari.vikash
fuente
2

Un truco sucio que a veces uso es ocultar variables en el atributo 'nombre' (que normalmente no uso para otros fines): 

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

De manera algo inesperada, tanto el valor antiguo como el nuevo se envían a someFunction(oldValue,newValue)

Jon
fuente
7
¡Sí, eso está sucio!
Alan Macdonald
2

No estoy seguro, pero tal vez esta lógica funcione.

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

Puede hacer esto: agregue el atributo oldvalue al elemento html, agregue set oldvalue cuando el usuario haga clic. Luego, el 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
fuente
0

Tal vez pueda almacenar el valor anterior del cuadro de texto en un cuadro de texto oculto. Luego, puede obtener el primer valor de hidden y el último valor de textbox. Una alternativa relacionada con esto, en el evento onfocus de su cuadro de texto, establezca el valor de su cuadro de texto en un campo oculto y en el evento onchange lea el valor anterior.

Canavar
fuente
1
Pero, si tenemos más de 100 cuadros de texto, en este caso necesitamos tener más de 100 variables ocultas, entonces, ¿hay alguna otra forma de obtener valores antiguos?
CFUser
0

Tal vez pueda intentar guardar el valor anterior con el evento "onfocus" para luego compararlo con el nuevo valor con el evento "onchange".

poseer
fuente