Ativar/desativar os campos de entrada usando JavaScript

Ao criar um formulário ou um questionário, há um requisito para solicitar ao usuário em um determinado ponto enquanto preenche um campo de entrada. Por exemplo, limitando o número de caracteres dentro de um campo i.e. ““Contato no”. Além disso, para aplicar uma condição de pré -requisito para preencher um campo específico, etc. Nesses cenários, ativar/desativar os campos de entrada em JavaScript é uma abordagem muito conveniente para o desenvolvedor e o final do usuário.

Este tutorial explicará as abordagens para ativar/desativar os campos de entrada usando JavaScript.

Como ativar/desativar os campos de entrada usando JavaScript?

Para ativar/desativar os campos de entrada usando JavaScript, as seguintes abordagens podem ser utilizadas em combinação com o “desabilitado" propriedade:

• ““ONCLICKEvento.
• ““addEventListener ()”Método.

Abordagem 1: Ativar/desativar os campos de entrada usando JavaScript usando o OnClick Event

Um "ONCLICK”O evento é usado para redirecionar para a função especificada. Este evento pode ser aplicado para invocar a função correspondente para ativar e desativar campos de entrada no botão Clique.

Exemplo

Vamos dar uma olhada no exemplo abaixo do momento:

Ativar/desativar o campo de texto

No código acima mencionado, execute as seguintes etapas:

• Inclua uma entrada “texto”Campo com o especificado“eu ia" e "espaço reservado”Valores.
• Além disso, crie dois botões separados com anexo “ONCLICK”Eventos redirecionando para duas funções diferentes para ativar e desativar os campos de entrada, respectivamente.

Vamos continuar até a parte JavaScript do Código:

No trecho de código acima, execute as seguintes etapas:

• Declare uma função chamada “Disablefield ()”.
• Em sua definição, acesse o campo de entrada criado por seu “eu ia”Usando o“documento.getElementById ()”Método
• Na próxima etapa, aplique o “desabilitado”Propriedade e atribua o valor booleano“verdadeiro”. Isso resultará em desativar o campo de entrada no botão Clique.
• Da mesma forma, defina uma função chamada “EnableField ()”.
• Em sua definição, da mesma forma, repita a etapa discutida para acessar o campo de entrada.
• Aqui, atribua o “desabilitado"Propriedade como"falso”. Isso resultará na ativação do campo de entrada desativado.

Saída

Na saída acima, pode -se observar que o campo de entrada está desativado e ativado corretamente no botão correspondente Clique.

Abordagem 2: Ativar/desativar os campos de entrada usando JavaScript usando o método addEventListener ()

O "addEventListener ()”O método é usado para anexar um evento ao elemento. Este método pode ser implementado para desativar e ativar um campo de entrada com base no evento anexado e no especificado “chave”.

Sintaxe

Na sintaxe acima:

• ““evento”Refere -se ao nome do evento.
• ““função”Aponta para a função para executar.
• ““usar”É o parâmetro opcional.

Exemplo

Vamos observar o exemplo abaixo do ponto:

Ativar/desativar o campo de texto

Nas linhas acima do código:

• Inclua o cabeçalho declarado.
• Na próxima etapa, repita o método discutido na abordagem anterior para incluir um campo de entrada com o especificado “eu ia" e "espaço reservado”Valores.

Vamos para a parte JavaScript do código:

No trecho de código acima, execute as seguintes etapas:

• Acesse o campo de entrada por seu “eu ia”Usando o“documento.getElementById ()”Método.
• Na próxima etapa, aplique o “addEventListener ()”Método e anexe um evento chamado“keydown”.
• No código adicional, atribua o “desabilitado"Propriedade como"falso”Para ativar o campo de entrada.
• Por fim, no “outro“Condição, aloque o“desabilitado"Propriedade como"verdadeiro”Por desativar o campo de entrada ativado ao pressionar o“Digitar" chave.

Saída

Da saída acima, é evidente que o campo de entrada fica desativado ao pressionar o “Digitar" chave.

Conclusão

O "desabilitado”Propriedade em combinação com o“ONCLICKEvento ou o “addEventListener ()”O método pode ser aplicado para ativar/desativar os campos de entrada usando JavaScript. A abordagem anterior pode ser utilizada para redirecionar para a função correspondente para ativar/desativar o campo de entrada no botão Clique. A última abordagem pode ser implementada para executar a funcionalidade necessária com base no evento anexado e no especificado “chave”. Este artigo explica como ativar/desativar os campos de entrada em JavaScript.