Como adicionar e remover o atributo readonly em javascript

No JavaScript, existem páginas da web que exigem que você insira dados confidenciais, que não devem ser modificados uma vez inseridos ou enquanto envia um formulário. Por exemplo, definir as permissões de arquivo para ser legível ou não. Nesses casos, adicionar e remover atributos readonly em JavaScript é muito eficaz no manuseio de arquivos e garantindo os requisitos gerais de segurança.

Este artigo discutirá o método para adicionar e remover um atributo readonly em javascript.

Como adicionar e remover o atributo readonly em javascript?

Para adicionar e remover um atributo readonly em javascript, aplique o “setAttribute ()" e "removeattribute ()" métodos.

O "setAttribute ()”O método atribui um valor a um atributo e o“removeattribute ()”O método remove um atributo do elemento especificado. Esses métodos podem ser associados a um “cliqueEvento para definir o valor especificado como “somente leitura”E restringir sua remoção.

Sintaxe

elemento.setattribute (nome, valor)

Na sintaxe acima, “nome”Refere -se ao nome do atributo e“valor”É o novo valor a ser atribuído.

elemento.removeattribute (nome)

Aqui, "nome”Refere -se ao nome do atributo específico.

Passe pelo exemplo a seguir para demonstração.

Exemplo

Em primeiro lugar, inclua dois botões com “addattribute" e "removeattribute”Ids. Esses botões serão utilizados para adicionar e remover o atributo readonly, respectivamente. Além disso, inclua um ID de entrada como “texto”Para inserir os dados do texto:

Adicione o atributo
Remova o atributo

No arquivo JavaScript, use o “documento.QuerySelector ()”Para buscar os elementos HTML adicionados com a ajuda de seus IDs especificados:

var addButton = documento.QuerySelector ('#addattribute');
var remoTButton = documento.QuerySelector ('#removeattribute');
var get = document.QuerySelector ('entrada');

Depois disso, aplique o “addEventListener ()”Método para anexar o manipulador de eventos de clique com o método setAttribute (). Funcionará de tal maneira que quando o “Adicione o atributo”O botão é clicado, o valor do campo de entrada será definido como“somente leitura”:

AddButton.addEventListener ('click', () =>
pegar.setattribute ('readonly', true);
);

Da mesma forma, repita o mesmo procedimento para remover o atributo definido, incluindo o evento, clique em separadamente e aplicando o método removeattribute ():

Removerbutton.addEventListener ('click', () =>
pegar.removeattribute ('readonly');
);

Para fins de teste, em primeiro lugar, inseriremos um valor no campo de entrada e clicará no botão Adicionar atributo. Como resultado, o atributo do valor agregado será definido como reado. Em seguida, clique no botão Remover atributo. Você pode notar que o valor ainda estará lá (não removido). É assim que o programa especificado funcionará:

Fornecemos os métodos mais simples para adicionar e remover atributos readonly no JavaScript.

Conclusão

Para adicionar e remover atributos readonly em JavaScript, o “setAttribute ()" e "removeattribute ()”Os métodos podem ser utilizados para adicionar e remover o atributo readonly, respectivamente, buscando o ID do botão correspondente, incluindo um manipulador de eventos e um tipo de entrada com cada um dos métodos implementados. Este blog explicou os métodos para adicionar e remover atributos readonly em javascript.