23.12.2024

Mudando o Valor em Entrada: Capturando Antigo e Novo em JS

Resposta Rápida

Se você precisa de uma solução instantânea, lembre-se de armazenar o valor do campo de entrada quando ele ganhar foco utilizando o evento onfocus. Quando o campo mudar, use o evento onchange para descobrir o novo valor. Aqui está um exemplo de código:

<input type="text" onfocus="this.previousValue = this.value" onchange="console.log('Valor anterior:', this.previousValue, 'Valor atual:', this.value);">

Nesse código, o evento onfocus salva o valor atual do campo na propriedade previousValue toda vez que ele ganha foco. Quando uma mudança ocorre, o evento onchange é acionado, permitindo-nos acessar tanto os valores antigos quanto os novos.

Explicação Detalhada

Vamos analisar mais de perto o processo de recuperação de valores anteriores e atuais de campos de texto:

Armazenando Valores Anteriores Usando Propriedades Personalizadas e Manipuladores de Evento

Usar propriedades HTML extensíveis nos permite armazenar informações relativas ao elemento:

<input type="text" onfocus="this.setAttribute('oldValue', this.value);" onchange="handleChange(this);">

function handleChange(element) {
  let oldValue = element.getAttribute('oldValue'); // obtém o valor antigo
  let newValue = element.value; // valor atual
  console.log('Valor anterior:', oldValue, 'Valor atual:', newValue);
}

Usando Atributos de Dados HTML5 para Monitorar Valores

Os atributos de dados HTML5 são utilizados para um armazenamento de dados eficaz:

let inputElements = document.querySelectorAll('input[type=text]');

inputElements.forEach(input => {
  input.onfocus = function() {
    this.dataset.previousValue = this.value; // salva o valor anterior
  };
  input.onchange = function() {
    alert('Valor anterior: ' + this.dataset.previousValue + ', Valor atual: ' + this.value); // mostra ambos os valores
  };
});

Gerenciando Campos de Texto com Objeto JavaScript

Gerenciar um grande número de campos de entrada torna-se mais fácil usando um objeto JavaScript:

let valueTracker = {}; // rastreador de valores

function initializeTracker(elementId) {
  let inputElement = document.getElementById(elementId);
  inputElement.onfocus = function() {
    valueTracker[this.id] = { old: this.value }; // lembra o valor anterior
  };
  inputElement.onchange = function() {
    valueTracker[this.id].new = this.value; // lembra o novo valor
    alert('Valor anterior: ' + valueTracker[this.id].old + ', Valor atual: ' + this.value);
  };
}

Recuperando Valor Padrão com a Propriedade defaultValue

Se você precisa do valor padrão de entrada, use a propriedade defaultValue:

let inputElement = document.getElementById('myInput');
console.log('Valor original:', inputElement.defaultValue); // retorna ao valor original

Visualização

Imagine um campo de texto como um guardiã de memória:

Antes da mudança: [🔒🧠]   // O valor original está trancado na “caixa de memória”.
Após a mudança: [🔓✍️]    // A “caixa” é aberta e as mudanças são feitas.

Recuperamos o valor antigo como uma caixa de memória desbloqueável:

🔐🔑 (Abrindo a “caixa” para ver o conteúdo anterior.)

• O evento onchange() captura o estado atual,
• Enquanto o guardiã de memória nos dá visão sobre o passado.

let oldValue;
inputElement.onfocus = function() { oldValue = this.value; }; // 🔒🧠 Valor protegido na "caixa de memória"
inputElement.onchange = function() { alert('Valor anterior: ' + oldValue + ', Valor atual: ' + this.value); }; // 🔓✍️ "Caixa" aberta

Com o evento onchange, os valores anteriores e atuais estão sempre sob seu controle.

Casos de Uso Complexos

Na prática, quando você trabalha com formulários compostos por muitos campos de entrada, elementos dinâmicos ou operações assíncronas, a situação pode não ser tão simples quanto parece. Use os métodos descritos acima para um monitoramento de mudanças confiável.

Condições e Circunstâncias Especiais

Preste atenção em casos especiais como campos de entrada que são adicionados ao DOM dinamicamente. Considere as diferenças de suporte entre navegadores e verifique a compatibilidade do seu código JavaScript.

Dicas de Especialista para Otimização de Desempenho

Para melhorar o desempenho e otimizar o uso de memória, a delegação de eventos a um elemento pai é recomendada. Isso permite coordenar os eventos focus e change para todos os campos de entrada usando um único manipulador de eventos:

let formElement = document.querySelector('form');
formElement.addEventListener('focus', event => {
  if (event.target.tagName === 'INPUT') {
    event.target.dataset.previousValue = event.target.value; // Salva o valor anterior
  }
}, true); // Captura o evento de foco

formElement.addEventListener('change', event => {
  if (event.target.tagName === 'INPUT') {
    alert('Valor anterior: ' + event.target.dataset.previousValue + ', Valor atual: ' + event.target.value); // Obtém ambos os valores na mudança
  }
});

Ao aplicar este método, você certamente conseguirá monitorar alterações com alta precisão.

Recursos Úteis

1. HTMLElement: evento change - Web API | MDN — Tudo o que você pode precisar sobre o evento change.
2. Evento onchange — Encontre informações sobre como usar onchange com elementos DOM.
3. Propriedade Value dos Elementos de Entrada do DOM HTML — Guia para usar a propriedade value.
4. Elemento: evento input - Web API | MDN — Informações sobre o evento input que pode ser usado em combinação com change.
5. Eventos - change — Visão geral do suporte e características dos eventos change e oninput em diferentes navegadores.

Video

Navigation