Como limpar os campos de entrada em JavaScript

Pode haver uma situação em que é necessário limpar o valor inserido de um campo de entrada ou todo o formulário. Por exemplo, você precisa alterar a categoria ou encontrar um requisito específico para alterar todos os dados inseridos. Nesses casos, a limpeza de campos de entrada usando JavaScript se torna muito eficaz e útil.

Este artigo discutirá os métodos para limpar os campos de entrada em JavaScript.

Como limpar os campos de entrada em JavaScript?

Para limpar os campos de entrada em JavaScript, as seguintes abordagens podem ser utilizadas:

• Evento "Onfocus" e propriedade "Target"
• Evento “OnClick” e “documento.getElementById () ”método
• Método “Reset ()”

Passar pelos métodos discutidos um por um!

Método 1: Limpar os campos de entrada em JavaScript usando o evento OnFocus e a propriedade de destino

O "No foco”O evento é acionado quando um elemento específico fica foco e o“ “alvo”Propriedade retorna o elemento que desencadeou o evento. Mais especificamente, essas técnicas podem ser aplicadas para limpar o valor alvo especificado no campo de entrada.

O exemplo a seguir explica claramente o conceito discutido.

Exemplo

No exemplo a seguir, atribuiremos um tipo de entrada como “texto”Com o valor especificado e e anexe como evento OnFocus, que acionará a função clearInput ():

Agora, defina a função chamada “ClearInput ()" com o "alvo”Propriedade como seu argumento para retornar o elemento que desencadeou o evento. Depois disso, será aplicada uma condição específica de que, se o campo de entrada mantiver um valor específico, como “entrada clara”, O campo de entrada será liberado:

função clearInput (Target)
if (alvo.valor == 'entrada clara')
alvo.value = "";

Agora, quando o usuário inserir “entrada clara”Valor no campo de entrada e fica foco, o valor inserido ficará claro:

Método 2: Limpar os campos de entrada em JavaScript usando o OnClick Event and Document.getElementById () método

Em JavaScript, o “documento.getElementById ()”O método é utilizado para acessar um elemento baseado em seu ID e“ONCLICK”É usado para anexar um evento a um elemento HTML. Mais especificamente, essa combinação pode ser usada de tal maneira quando o botão adicionado for clicado, o elemento de campo de entrada será acessado e o valor inserido será limpo.

Exemplo

Em primeiro lugar, atribua um tipo de entrada com um ID nomeado como “nome”:

Em seguida, crie um botão com um valor chamado “claro”E adicione um“ONCLICK”Evento que acessará a função clearInput () quando acionada:

Agora, defina uma função chamada “ClearInput ()”. Aqui, o documento.getElementById () acessará o campo de entrada usando seu ID. Então, um “seA condição será aplicada para que, enquanto o campo de entrada não estiver vazio, o valor do campo de entrada será definido como vazio:

function clearinput ()
var getValue = documento.getElementById ("nome");
if (getValue.valor != "")
Obter valor.value = "";

Nesse cenário, clicar no botão Adicionado limpará o valor do campo de entrada:

Deseja redefinir todos os valores do campo de entrada de uma só vez? Confira o próximo método.

Método 3: Limpar os campos de entrada em JavaScript usando o método Reset ()

O "reiniciar()”Método limpa todos os valores dos elementos de formulário. Este método pode ser implementado para limpar o campo de entrada segurando o texto com um clique de um botão.

Sintaxe

formObject.reiniciar()

Aqui, "formObject”É o elemento que será redefinido.

Dê uma olhada no exemplo dado.

Exemplo

Primeiro, crie um formulário e atribua um ID como demonstrado abaixo. Em seguida, peça ao usuário para inserir um “EU IA”No campo de entrada. Em seguida, inclua um botão com um “ONCLICK”Evento acessando uma função, conforme discutido no método anterior:

EU IA:

Finalmente, declare uma função chamada “ClearInput ()”, Busque o formulário usando o documento.getElementById () Método e redefina o campo de entrada após o botão Clique:

function clearinput ()
documento.getElementById ("forma").reiniciar();

Saída

Demonstramos as técnicas para limpar os campos de entrada em JavaScript.

Conclusão

Para limpar os campos de entrada em JavaScript, utilize o “No focoEvento e “alvo”Propriedade para aplicar a funcionalidade com base na presença de um valor específico, ou no“OnClick ()Evento e “documento.getElementById ()”Método para obter o ID do campo de entrada e limpar o campo enquanto houver algum valor nele ou o“reiniciar()”Método para redefinir os valores de todo o campo de entrada de uma só vez. Este artigo explicou os métodos para limpar os campos de entrada especificados em JavaScript.