Como obter o valor antigo com o evento onchange () na caixa de texto

88

Eu tenho uma caixa de texto e um valor preenchido nela quando a página carrega. Agora, se o usuário alterar qualquer coisa na caixa de texto, então eu quero obter o valor alterado (novo valor) e o valor antigo, mas quando faço ELEMENT.value, ele está fornecendo apenas o valor alterado

alguma sugestão para obter valor antigo?

abaixo está o meu 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>

Desde já, obrigado

javascript html validation

— CFUser
fonte

70

element.defaultValue lhe dará o valor original.

Observe que isso só funciona no valor inicial.

Se você precisar que isso mantenha o valor "antigo" toda vez que ele mudar, uma propriedade expando ou método semelhante atenderá às suas necessidades

— George
fonte

apenas uma nota. Descobri no firefox element.getAttribute ("value") também parece revelar o original ... Não sei o suficiente para dizer se isso é um cross-browser / standard.

— cheshirekow,

48

element.defaultValue retorna o valor definido na tag <input>. Se este valor foi alterado pela edição ou algum outro JavaScript, elemento, defaultValue não retornará este (novo) valor antigo.

— SabreWolfy

Obrigado SabreWolfy, localizei seu comentário e resolveu meu problema. Tive que alterar o valor várias vezes, portanto, fazer o acima não era bom.

179

Você precisará armazenar o valor antigo manualmente. Você pode armazená-lo de várias maneiras diferentes. Você pode usar um objeto javascript para armazenar valores para cada caixa de texto, ou você pode usar um campo oculto (eu não recomendo - muito html pesado), ou você pode usar uma propriedade expando na própria caixa de texto, como este:

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

Então, sua função javascript para lidar com a mudança será assim:

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

— Gabriel McAdams
fonte

25

Posso entender que você votou contra uma resposta se ela não funcionar ou se for uma resposta inadequada. Eu dei uma resposta que resolveu a necessidade do usuário. Este código foi testado. Esta completo. E faz algo que a resposta aceita não faz (você sempre pode olhar para a propriedade defaultValue, mas e se o usuário alterar o valor mais de uma vez?).

— Gabriel McAdams

A mudança sugerida aqui está incorreta. Em primeiro lugar, quando ocorre um alerta, o campo perde o foco. Qualquer alteração posterior ocorreria após o evento onfocus ser disparado. Em segundo lugar, o evento onchange do campo de entrada não dispara até que perca o foco.

— Gabriel McAdams

2

Isso funciona melhor se você estiver manipulando o valor várias vezes. A resposta acima (element.defaultValue) funciona apenas uma vez. Acima este :)

4

Simples e eficaz. Gostaria de poder dar a você mais do que +1.

— Ian Kemp

1

@GrijeshChauhan: Não. Estamos colocando o valor antigo em foco. Depois disso, após cada mudança, nós o configuramos novamente.

— Gabriel McAdams

6

Eu sugeriria:

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

  //we have available old value here;
}

— Krsnik
fonte

6

Você deve usar atributos de dados HTML5. Você pode criar seus próprios atributos e salvar diferentes valores neles.

— tiwari.vikash
fonte

2

Um truque sujo que às vezes uso é ocultar variáveis no atributo 'nome' (que normalmente não uso para outros fins):

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

De forma um tanto inesperada, tanto o valor antigo quanto o novo são submetidos ao someFunction(oldValue,newValue)

— Jon
fonte

2

Não tenho certeza, mas talvez essa 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
fonte

2

Você pode fazer isso: adicione o atributo oldvalue ao elemento html, adicione definir oldvalue quando o usuário clicar. Então, o 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 Filho
fonte

0

Talvez você possa armazenar o valor anterior da caixa de texto em uma caixa de texto oculta. Então você pode obter o primeiro valor de oculto e o último valor da própria caixa de texto. Uma alternativa relacionada a isso, no evento onfocus de sua caixa de texto, defina o valor de sua caixa de texto para um campo oculto e no evento onchange leia o valor anterior.

— Canavar
fonte

1

Mas, se tivermos mais de 100 caixas de texto, neste caso precisamos ter mais de 100 variáveis ocultas. Existe alguma outra maneira de obter valores antigos?

— CFUser

0

Talvez você possa tentar salvar o valor antigo com o evento "onfocus" para depois compará-lo com o novo valor com o evento "onchange".

— possuir
fonte