09.03.2025

Desativando Campos de Entrada com JavaScript

Resposta Rápida

Para desativar um elemento <input type="text">, utilize o atributo disabled:

<input type="text" disabled>

Esse campo de entrada aparecerá esmaecido e estará indisponível para interação. Portanto, seu campo de entrada está oficialmente de férias! 🎉

Se você precisa de mais controle, pode utilizar JavaScript. Basta definir a propriedade disabled como true:

document.getElementById('foo').disabled = true;

O Dilema: 'disabled' vs. 'readOnly'

Quais são as diferenças entre esses atributos e por que isso é importante? Usar disabled torna o elemento não editável e o exclui do processo de envio do formulário. Por outro lado, com readOnly, você ainda pode enviar os dados, mas impede que os usuários façam alterações.

Para tornar um campo de entrada apenas leitura usando JavaScript, use o seguinte comando:

document.getElementById('foo').readOnly = true; // Agora, os dados só podem ser visualizados

Como Escolher Entre 'disabled' e 'readOnly'?

Use disabled quando precisar desativar completamente o campo e excluí-lo do envio do formulário. readOnly é adequado para casos em que os dados do campo devem ser enviados, mas precisam permanecer inalterados para o usuário.

Visualizando o Bloqueio de Entrada

Considere um <input type="text"> ativo como uma fechadura aberta. 🔓📝 Quando adicionamos disabled:

<input type="text" disabled>

Obtemos um campo de entrada trancado que não pode ser acessado: 🔒📝 O usuário não pode mais "preencher" seus campos de entrada.

Exibindo Dados Inalteráveis? Use Elementos Diferentes de Input

Em alguns casos, é melhor usar elementos como <span> ou até mesmo <div> para exibir dados em vez de <input>, especialmente se eles não forem destinados à edição.

Essa abordagem melhora a integridade dos dados, particularmente se os dados forem extraídos de um banco de dados, ao mesmo tempo que melhora a estabilidade do layout e a clareza de intenção para o usuário.

Estilizando Campos Inalteráveis

Aplicar estilos a campos disabled ou readOnly pode melhorar a usabilidade. Por exemplo, você pode mudar a cor de fundo e a cor do texto para destacar esses campos:

input[disabled], input[readOnly] {
  background-color: #e0e0e0; // Cor cinza indicando que o campo está "descansando"
  color: #686868; // Texto mais escuro para melhor legibilidade
}

Se você usar elementos que não sejam input para dados estáticos, o estilo deve coincidir com o design geral do formulário ou página, indicando claramente que esses dados não devem ser modificados.

Desativação Imediata de Entrada para Maior Segurança

Para garantir o manuseio seguro de dados em formulários sensíveis, você pode desativar os campos de entrada imediatamente após o carregamento da página:

window.onload = function() {
  document.getElementById('foo').disabled = true; // Desativado logo após o carregamento
};

Considere Dados Dinâmicos em Seus Campos de Entrada

Se os campos de entrada forem preenchidos com dados dinâmicos, por exemplo, de um banco de dados, certifique-se de verificar os dados antes de aplicar disabled ou readOnly:

window.onload = function() {
  var meuInput = document.getElementById('foo');

  if(/* verificação da condição */) {
    meuInput.disabled = true;
  }
};

Recursos Úteis

1. Atributo HTML input disabled — Guia W3Schools sobre desativação de elementos input em HTML.
2. input: O elemento de Entrada (Input de Formulário) — Análise detalhada do elemento <input> na MDN, incluindo informações sobre sua desativação.
3. Qual é a diferença entre disabled e readonly para campos de entrada de formulários HTML? — Discussão sobre a diferença entre os atributos disabled e readOnly no Stack Overflow.
4. WebAIM: Criando Formulários Acessíveis — Visão geral do impacto dos elementos desativados na acessibilidade do site.
5. “tipos de input” | Posso usar... — Tabelas de compatibilidade para vários tipos de input em diferentes navegadores.
6. Validação de formulário usando HTML e JavaScript — Um tutorial do GeeksforGeeks sobre validação de formulários usando HTML e JavaScript.

Video

Navigation