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