Como desativar um campo de texto para edição com JavaScript e jQuery

Neste artigo você vai aprender a como desativar um campo de texto para edição com JavaScript, jQuery e também com HTML puro!

Fala programador(a), beleza? Bora aprender mais sobre manipulação de inputs com JavaScript e jQuery!

Temos duas abordagens aqui para desabilitar a edição do formulário

Mas a ideia principal é a mesma: adicionar uma atributo na tag de input

Este atributo pode ser o disabled ou o readonly, e há diferenças cruciais entre eles

• disabled: não permite edição e não envia os dados do input para o servidor;
• readonly: não permite edição e envia os dados do input para o servidor

Então na maioria esmagadora das vezes vocẽ vai optar por readonly, já que disabled não envia os dados

Formação Recomendada

Formação Claude Code

Domine Claude Code do absoluto zero até o avançado

• 120 aulas
• 4 projetos
• 9h 45min

Conhecer formação

E como desabilitar um campo de texto com JavaScript?

Simplesmente acessamos o input e alteramos a sua propriedade readOnly para true

Veja um exemplo:

var input = document.querySelector("input");

input.readOnly = true;

E como desativar um campo com jQuery?

Quase igual com JS puro, você vai selecionar o elemento, utilizar o método attr e mudar o valor de readonly para true

Veja um exemplo:

var input = $("input");

input.attr("readonly", true);

E como impossibilitar a edição do input com HTML puro?

Você pode colocar na própria tag o input de readonly

Veja um exemplo:

<input type="text" value="Texto do input" readonly>

Conclusão

Neste artigo vimos como desativar um campo de texto para edição com JavaScript, jQuery e também com o próprio HTML

A ideia é a mesma para todas as abordagens: precisamos alterar o valor do atributo readonly do input

E então não será mais possível alterar texto texto dele via página web

Mas é importante citar que usuários com conhecimentos de HTML e JS, podem facilmente manipular estas informações

Confira também nosso catálogo de cursos gratuitos, com aulas semanais no YouTube

Como reativar o campo para edição?

Desabilitar é metade da história

Em formulário dinâmico quase sempre você precisa liberar o input de novo, tipo depois que o usuário clica em "editar"

A lógica é a mesma de antes, só que ao contrário: agora o valor volta pra false

Com JavaScript puro:

var input = document.querySelector("input");

input.readOnly = false;

Com jQuery você pode mudar o atributo ou simplesmente remover ele:

var input = $("input");

input.attr("readonly", false);

Ou assim, removendo de vez:

input.removeAttr("readonly");

Beleza? Aí o campo volta a aceitar edição normalmente

Selecionando o input certo

Repara que o querySelector("input") pega o primeiro input que ele achar na página

Na prática você quase sempre quer travar um campo específico, não todos

Aí é só mirar por id ou por classe:

var input = document.querySelector("#email");

input.readOnly = true;

Com jQuery a ideia é a mesma:

$("#email").attr("readonly", true);

Tome cuidado com isso, senão você acaba desabilitando o formulário inteiro sem querer

E se não for um campo de texto?

O mesmo raciocínio vale pra outros campos do formulário, tipo textarea e select

No textarea o readonly funciona igualzinho ao input:

<textarea readonly>Texto travado</textarea>

Já o select é o patinho feio da história: ele NÃO aceita readonly

Pra travar um select você usa o disabled mesmo, lembrando que aí o valor não vai pro servidor

Se você precisa que o dado do select ainda seja enviado, uma saída é deixar ele disabled e mandar o valor num input hidden junto

Quando usar disabled e quando usar readonly?

Resposta rápida pra não errar:

Use readonly quando você quer que o usuário veja e o dado ainda seja enviado no submit (o caso mais comum)

Use disabled quando o campo é só visual naquele momento e você NÃO quer mandar aquele dado pro servidor

Detalhe visual: o disabled costuma deixar o campo acinzentado por padrão, o readonly mantém a aparência normal