16.03.2025

Monitorando Alterações na Entrada de Texto com JavaScript

Resposta Rápida

Para monitorar efetivamente as alterações, utilize o evento input em elementos <input>.

document.querySelector('#input').addEventListener('input', function(event) {
    console.log(event.target.value);
});

Esse código registra cada ação, como digitação, remoção ou colagem—instantaneamente.

oninput vs onchange: Por que a Escolha é Importante

O evento input difere de onchange. O último é acionado quando o elemento perde o foco, enquanto input responde a cada ação imediatamente. Isso proporciona feedback imediato, o que é crucial para interfaces que requerem validação, formatação ou filtragem de texto "em tempo real".

Para versões mais antigas do Internet Explorer, o uso dos eventos oninput e onpropertychange gerava resultados semelhantes. Atualmente, é preferível seguir os padrões HTML do WHATWG para compatibilidade entre navegadores.

Visualização

Imagine que cada tecla pressionada em um campo de entrada é uma nota em uma composição musical:

Campo de Entrada: [🎶]

O evento `input` "ouve" essa melodia:

```javascript
inputField.addEventListener('input', function() {
    console.log('Nota tocada: 🎵');
});

Com cada nota (pressionamento de tecla), a orquestra de interação do usuário proporciona alterações instantâneas:

Tecla Pressionada	Evento Acionado
A	🎵
p	🎵
p	🎵
l	🎵
e	🎵

## Lidando com Exceções e Criando Soluções Universais

### Garantindo Compatibilidade Regressiva

Se a máxima compatibilidade for necessária, utilize uma abordagem de **aperfeiçoamento progressivo** para dar suporte a **navegadores mais antigos**. Mesmo que não consigam utilizar todas as funcionalidades, as características básicas devem ser preservadas.

```javascript
let inputElement = document.querySelector('input');
let inputEventHandler = function(event) {
    console.log(event.target.value); // 👀 capturando a entrada do usuário
};
if (inputElement.oninput === undefined) {
    // Velho fiel IE?
    inputElement.onpropertychange = inputEventHandler;
} else {
    inputElement.oninput = inputEventHandler;
}

Esse código verifica o suporte ao evento input. Se não estiver disponível, ele recorre ao uso de onpropertychange.

Otimizando o Monitoramento de Colagens

É essencial considerar textos colados sem a entrada direta do usuário.

inputElement.addEventListener('paste', function(event) {
    // Esperar é difícil. Tom Petty também achava!
    setTimeout(() => console.log(inputElement.value), 0);
});

Usar o evento onpaste juntamente com uma pequena espera setTimeout permite rastrear a exibição do texto colado no campo de entrada.

Melhorando o Desempenho com Debouncing

Entradas frequentes e repetidas podem degradar o desempenho. Use debouncing para otimizar—atrasando a execução da função até que o usuário pare de digitar.

let debounce = function(func, delay) {
    let inDebounce;
    return function() {
        clearTimeout(inDebounce);
        inDebounce = setTimeout(() => func.apply(this, arguments), delay);
    };
};

inputElement.addEventListener('input', debounce(function(event) {
    console.log(event.target.value);
}, 250));

Essa técnica garante que o manipulador de eventos seja ativado apenas após um curto período de inatividade, liberando recursos do sistema.

Tratando Problemas de Entrada com textarea no Safari

Para elementos <textarea> no Safari, o evento input pode não funcionar corretamente. Em vez disso, use o evento textInput:

let textAreaElement = document.querySelector('textarea');
textAreaElement.addEventListener('textInput', function(event) {
    console.log(event.data);
});

Isso proporciona controle preciso sobre a entrada de texto e rastreia alterações com precisão.

Recursos Úteis

1. Evento Input - Web API | MDN - Um guia detalhado sobre o uso do evento input.
2. Debouncing e Throttling Explicados com Exemplos | CSS-Tricks - Diferenças e implementações de debouncing e throttling.
3. Introdução a Eventos JavaScript - Fundamentos do trabalho com eventos em JavaScript.
4. Delegação de Evento - Exemplos e vantagens da delegação de eventos.
5. jQuery: Como acionar um evento em um campo de texto quando eu terminar de digitar? - Stack Overflow - Soluções da comunidade para rastrear alterações na entrada.
6. Debounce: Como Atrasar a Execução de Função em JavaScript - Informações detalhadas sobre debouncing e suas variações.
7. Padrão HTML - A especificação oficial HTML para o evento input e elementos relacionados.

Video

Navigation