Readonly vs Disabled: Qual eu devo usar ?

image.png Olá devs 😁, eu me frustrei uns dias desses com um formulário que nele eu deveria deixar os campos de município e estado já preenchidos é desabilitado. Nessa feature de formulário, fiquei travado pois todos os dados estavam sendo passado enviado corretamente pelo formulário, mas os campos município e estado não eram passados juntamente com os outros dados. Com esse problemas na mão, fui na nossa velha amiga a buscar a resposta: internet.

Analisando o problema com mais detalhada, percebi que os campos mencionados acima, foram atribuídos à propriedade disabled, é nesse ponto que eu fui ler mais as documentações. O atributo disabled tem um comportamento de tornar o elemento não editável e também não focável, mas isso eu já sabia e nem precisava de documentação para compreender, mas que ele não envia os dados com o formulário que me deixou intrigado.

A realidade da vida nos ensinou que não devemos confiar em seres humanos e sim em documentos.

Problema encontrado

Ok, encontrei o problema, os campos de município e estado não eram enviados por esta atribuição a eles. Porém a regra de negócio define que esses campos não seja possível editar mas somente visualizados. Mas se não pode editar, tem que ser visualizado pelo usuário e ainda sim tem que ser enviado no formulário. Qual é a propriedade que eu devo usar para isso ? R: Readonly

Então veio o atributos readonly para solucionar esse problema besta, que a própria descrição dele basicamente é o que a regra de negócio define como obrigatório. Ele é usado para especificar que o campo é somente leitura, ou seja, o usuário não pode editá-lo, mas pode selecionar e copiar o conteúdo e isso permite que ele seja passado juntamente com os outros dados editáveis do formulário. Problema solucionado 🎉, mas vamos ao detalhes dessas duas propriedades.

Os atributos readonly e disabled são usados em elementos HTML para torná-los não editáveis e somente visualizados. O atributo readonly é usado para especificar que o campo é somente leitura, ou seja, o usuário não pode editá-lo, mas pode selecionar e copiar o conteúdo. Já o atributo disabled torna o elemento não editável, não focável e nem mesmo enviado com o formulário. O usuário não pode editar nem focar no controle, nem em seus descendentes de controle de formulário. Além disso, o elemento é desativado e não pode ser clicado.

Quando devo usar Readonly ou Disabled?

O atributo readonly é recomendado em situações em que o campo deve ser exibido para o usuário, mas não pode ser editado. Por exemplo, quando tem um regra de negócio que obrigada um campo já vim preenchido ou quando o campo contém informações que não devem ser alteradas pelo usuário. O mais interessante de usar o readonly, é para evitar que o usuário edite um campo enquanto o formulário está sendo enviado ou processado.

Para o disabled é recomendado em situações em que o campo não deve ser editado e principalmente enviado com o formulário. Por exemplo, quando o campo é opcional e não é necessário enviá-lo com o formulário ou campos que contêm informações sensíveis que não devem ser alteradas pelo usuário.

Em resumo:

  • O disabled é recomendado quando o campo não deve ser editado e nem enviado com o formulário e;
  • O atributo readonly é recomendado quando o campo deve ser exibido para o usuário, mas não pode ser editado;
  • Ou seja , tanto para o readonly como para o disabled a definição deles vai ser por questões de segurança ou para evitar erros de entrada de dados.

Fonts:

https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/disabled https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/readonly

Outro detalhe é que elementos disabled são pulados quando vc navega pelos campos com a tecla TAB. Por exemplo, se tivermos:

<input type="text" name="nome" value="Nome" readonly>
<input type="text" name="idade" value="Idade" disabled>
<input type="text" name="endereco" value="Endereço">

Ao navegar pelos campos com a tecla TAB, o campo idade é pulado (ele vai do Nome direto para o Endereço).

E como já dito, elementos disabled não podem ser clicados, então mesmo se eu fizesse isso:

// adiciona evento de clique em todos os inputs
document.querySelectorAll('input').forEach(function(element) {
  element.addEventListener('click', function(e) {
    alert('clicado: ' + e.target.value);
  });
});

Mesmo assim, ao clicar no input que está disabled, nada acontece (mas se clicar nos outros, funciona).

E na verdade elementos disabled não recebem nenhum tipo de evento (não se limita ao clique).


Apesar disso, vale lembrar que os valores ainda podem alterados via JavaScript.

Bem atentado. Isso é muito interessante, pois pode melhorar bastante o controle da navegação do usuário, aprimorando a usabilidade.