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

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

Leia também

• Como verificar se um checkbox está checado? (c/ JavaScript ou jQuery)
• Como copiar textos para a área de transferência com JavaScript (Clipboard)