20.11.2024

Bloqueando Entrada em um Campo de Texto Sem Desativar: jQuery

Resposta Rápida

Para impedir a entrada de texto em um campo de texto HTML, use o manipulador de eventos keydown e o método preventDefault do JavaScript:

document.querySelector('input[type="text"]').addEventListener('keydown', event => event.preventDefault());

Assim, quando uma tecla é pressionada no campo, o evento keydown é acionado e executa uma função que bloqueia a ação padrão do navegador — inserir caracteres.

Ferramentas de Controle de Entrada

Usando o Atributo readonly no HTML

Para manter a interatividade no campo, aplique o atributo readonly:

<input type="text" name="inputName" readonly>

Visualmente, campos somente leitura não parecem desativados, o que ajuda a manter um design de formulário consistente.

Controle com JavaScript

Aprimore o controle da entrada usando jQuery para bloquear teclas:

$('input[type="text"]').on('keydown', function(event) {
    event.preventDefault();
    // Pergunta: Por que não é possível digitar texto neste campo?
    // Resposta: É como se dissesse: "Desculpe, a entrada de texto aqui não é permitida."
});

Essa abordagem garante a prevenção imediata da entrada.

Limitando o Comprimento do Texto com HTML

Utilize o atributo maxlength para restringir o comprimento do texto de entrada:

<input type="text" name="inputName" maxlength="0">

Essa é uma solução não convencional, mas mantém o campo ativo sem permitir a entrada de texto.

Impedindo a Seleção de Texto com CSS

Para campos apenas leitura, evite também a seleção de texto:

input[readonly] {
    user-select: none;
    /* É como se dissesse em código: "Não toque!" */
}

Visualização

Considere uma analogia para como impedir a entrada enquanto mantém o campo ativo:

   🏺 <--- Este é o seu campo de texto  
🚫💧 <--- Não despeje água (entrada do usuário) nele

A entrada do teclado é bloqueada, mas o usuário ainda pode selecionar e copiar o conteúdo, ou enviá-lo em um formulário — como um vaso que está cheio, mas com uma tampa.

Antes: 🏺✅💧 (Entrada permitida)  
Agora: 🏺🚫💧 (Entrada bloqueada)

Considerações para Leitores de Tela

Usar readonly e impedir a entrada de texto não prejudica a acessibilidade do campo para leitores de tela.

Limitando Operações de Copiar e Colar

Além disso, impeça a colagem de dados:

<input type="text" onpaste="return false;">

Esse método permite controle total sobre o conteúdo do campo.

Interagindo com Formulários

Diferentemente dos campos desativados, campos com o atributo readonly por padrão enviam seu valor quando o formulário é enviado.

Recursos Úteis

1. O Evento "input" para Elementos - Web API | MDN
2. O Atributo readonly para HTML - HTML: Linguagem de Marcação de Hipertexto | MDN
3. Manipulação de Eventos no JavaScript do DOM
4. user-select | CSS-Tricks
5. KeyboardEvent - Web API | MDN
6. Introdução à Manipulação de Eventos
7. Padrão HTML

Video

Navigation