Como adicionar o atributo readonly com JavaScript

Neste artigo você vai aprender a como adicionar o atributo readonly com JavaScript, utilizando apenas uma linha de código!

Fala programador(a), beleza? Bora aprender mais sobre DOM, atributos de HTML e JavaScript!

Nós precisamos primeiramente selecionar o elemento que o atributo precisa ser adicionado

Este elemento, que provavelmente será um input, pode ser selecionado com um dos seguintes métodos:

• querySelector;
• getElementById;

Há outros métodos, mas estes são suficientes para o que precisamos fazer

Depois, vamos utilizar o método setAttribute, configurado com dois parâmetros, que são: readonly e true

Isso é o suficiente para resolver o problema, veja por meio de código:

const input = document.querySelector("input")

input.setAttribute("readonly", true)

Qualquer atributo pode ser adicionado utilizando esta mesma abordagem

Deixe um comentário contando o que achou desta solução 🙂

Quer aprender mais sobre JavaScript? Confira o vídeo abaixo:

Conclusão

Neste artigo você viu como adicionar o atributo readonly com JavaScript

Utilizamos o método setAttribute, com a configuração de dois parâmetros

Foi necessário também selecionar o elemento através do DOM, no artigo utilizamos querySelector, mas há outros métodos para o mesmo fim

Deseja programar de forma profissional? Confira o nosso treinamento completo clicando aqui.

Uma plataforma de cursos com projetos completos, comunidade de alunos e muito mais!

Há também o nosso canal no YouTube, com muito conteúdo gratuito de qualidade!

Como remover o atributo readonly com JavaScript?

Quem trava um campo quase sempre precisa do caminho inverso depois, beleza?

A lógica é a mesma, só muda o método: no lugar do setAttribute entra o removeAttribute, e ele recebe só o nome do atributo

const input = document.querySelector("input")

input.removeAttribute("readonly")

O uso mais comum disso é o campo nascer travado e liberar depois de alguma ação do usuário, tipo um clique no botão de editar

Tome cuidado com um detalhe: remover o atributo não limpa nada, o valor que estava lá continua lá, o campo só volta a ser editável 🙂

Dá pra usar a propriedade readOnly em vez do setAttribute:

Existe um segundo caminho, e ele é bem mais direto

O elemento tem uma propriedade própria pra isso, então tu mexe nela como se fosse uma variável qualquer

const input = document.querySelector("input")

input.readOnly = true

input.readOnly = false

Repara na letra O maiúscula do readOnly, é aqui que muita gente se ferra e fica achando que o código está quebrado

A vantagem é que a propriedade trabalha com booleano de verdade, então dá pra ler o estado atual e até inverter ele numa linha só

if (input.readOnly) {
console.log("o campo está travado")
}

input.readOnly = !input.readOnly

Esse último exemplo é o famoso toggle: um clique trava, o outro libera, sem if gigante no meio

readonly ou disabled? Não é a mesma coisa:

Essa confusão é campeã, e o estrago aparece só na hora do submit

O campo readonly continua fazendo parte do formulário: o usuário não consegue digitar, mas consegue focar, selecionar e copiar o texto, e o valor vai junto quando o formulário é enviado

Já o disabled tira o campo do jogo: ele não recebe foco e o valor não é enviado no submit

Então a regra de bolso é simples

Se tu quer travar a edição mas ainda precisa daquele valor lá no backend, é readonly

Se o campo não deve nem existir pra aquela situação, é disabled

Já me ferrei uma vez por causa disso: campo desabilitado, formulário enviado, e o valor simplesmente não chegou do outro lado 😛

Como aplicar readonly em vários campos de uma vez:

No mundo real dificilmente é um input só, normalmente é um formulário inteiro que precisa ficar em modo leitura

Aí o querySelector sozinho não resolve, porque ele devolve só o primeiro elemento que encontrar

A saída é o querySelectorAll, que devolve uma lista, e depois percorrer essa lista

const inputs = document.querySelectorAll("form input")

inputs.forEach((input) => {
input.readOnly = true
})

Trocando o true por false no mesmo laço tu libera o formulário inteiro de volta

Se quiser travar só uma parte, dá pra apertar o seletor por classe, tipo ".form-bloqueado input", e a lógica continua idêntica

E se o projeto usa React, Vue ou outro framework?

Esse é o ponto que mais mudou desde que este artigo saiu

Hoje é bem provável que o teu input não esteja num HTML solto, e sim dentro de um componente

Nesse cenário sair alterando o elemento na mão pelo DOM é pedir pra ter dor de cabeça: na próxima renderização o framework reconstrói aquele pedaço da tela do jeito que ele acha que deveria estar, e o teu ajuste some

A ideia muda de lugar: em vez de mandar no elemento, tu manda no estado

Guarda um booleano dizendo se o campo está travado e deixa o componente decidir como renderizar o campo a partir dele

O setAttribute e a propriedade readOnly continuam valendo perfeitamente pra JavaScript puro, script injetado, página estática e manipulação pontual

Só não são o caminho quando existe um framework cuidando da tela pra ti, beleza?

Leia também

• Como adicionar atributos por condicional no React JS
• Função para adicionar x meses a uma data em JavaScript