Readonly vs Disabled: Qual eu devo usar ?
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
readonlycomo para odisableda 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.