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