Comment effacer les champs d'entrée en javascript

Il peut y avoir une situation où elle est nécessaire pour effacer la valeur saisie d'un champ de saisie ou l'ensemble du formulaire. Par exemple, vous devez modifier la catégorie ou rencontrer une exigence spécifique pour modifier toutes les données entrées. Dans de tels cas, la compensation des champs d'entrée utilisant JavaScript devient très efficace et utile.

Cet article discutera des méthodes pour effacer les champs d'entrée en JavaScript.

Comment effacer les champs d'entrée en javascript?

Pour effacer les champs d'entrée en JavaScript, les approches suivantes peuvent être utilisées:

• Événement «Onfocus» et propriété «cible»
• Événement «Onclick» et document «Document.getElementById () »Méthode
• Méthode «réinitialiser ()»

Passer par les méthodes discutées une par une!

Méthode 1: Effacer les champs d'entrée en JavaScript à l'aide de l'événement OnFocus et de la propriété cible

Le "onfocus»L'événement est déclenché lorsqu'un élément spécifique se concentre sur le focus, et le«cible»La propriété renvoie l'élément qui a déclenché l'événement. Plus précisément, ces techniques peuvent être appliquées pour effacer la valeur cible spécifiée dans le champ de saisie.

L'exemple suivant explique clairement le concept discuté.

Exemple

Dans l'exemple suivant, nous attribuerons un type d'entrée comme «texte”Avec la valeur spécifiée et et attachez en tant qu'événement OnFocus qui déclenchera la fonction ClearInput ():

Maintenant, définissez la fonction nommée «ClearInput ()" avec le "cible»Propriété comme argument afin de retourner l'élément qui a déclenché l'événement. Après cela, une condition spécifique sera appliquée que si le champ de saisie maintient une valeur particulière, comme «Effacer l'entrée», Le champ de saisie sera effacé:

fonction clearinput (cible)
si (cible.valeur == 'Clear Input')
cible.value = "";

Maintenant, lorsque l'utilisateur saisira "Effacer l'entrée”Valeur dans le champ de saisie et il obtient une mise au point, la valeur entrée sera claire:

Méthode 2: Effacer les champs d'entrée en JavaScript à l'aide de l'événement et du document OnClick.Méthode GetElementById ()

En JavaScript, le «document.getElementByid ()«La méthode est utilisée pour accéder à un élément en fonction de son identifiant et«sur clic”Est ​​utilisé pour attacher un événement à un élément HTML. Plus précisément, cette combinaison peut être utilisée de manière à ce que le bouton ajouté soit cliqué, l'élément de champ de saisie sera accessible et la valeur entrée sera effacée.

Exemple

Tout d'abord, attribuez un type d'entrée avec un ID nommé comme «nom»:

Ensuite, créez un bouton avec une valeur nommée "clair"Et ajoutez un"sur clic”Événement qui accédera à la fonction ClearInput () lors du déclenchement:

Maintenant, définissez une fonction nommée «ClearInput ()". Ici, le document.getElementById () accédera au champ de saisie en utilisant son identifiant. Ensuite, un «si»La condition sera appliquée de sorte que tant que le champ de saisie n'est pas vide, la valeur du champ de saisie sera définie comme vide:

fonction clearInput ()
var getValue = document.getElementById ("nom");
si (getValue.valeur != "")
getValue.value = "";

Dans ce scénario, en cliquant sur le bouton ajouté, effacer la valeur du champ de saisie:

Veulent réinitialiser toutes les valeurs du champ de saisie à la fois? Découvrez la méthode suivante.

Méthode 3: Effacer les champs d'entrée en javascript à l'aide de la méthode reset ()

Le "réinitialiser()»La méthode efface toutes les valeurs des éléments de forme. Cette méthode peut être implémentée pour effacer le texte de maintien du champ de saisie en un clic d'un bouton.

Syntaxe

formObject.réinitialiser()

Ici, "formObject"Est l'élément qui sera réinitialisé.

Jetez un œil à l'exemple donné.

Exemple

Tout d'abord, créez un formulaire et attribuez-lui un identifiant comme démontré ci-dessous. Ensuite, demandez à l'utilisateur de saisir un «IDENTIFIANT”Dans le champ de saisie. Ensuite, incluez un bouton avec un "sur clic»Événement accédant à une fonction comme discuté dans la méthode précédente:

IDENTIFIANT:

Enfin, déclarez une fonction nommée «ClearInput ()», Récupérez le formulaire en utilisant le document.Méthode GetElementById () et réinitialisez le champ de saisie sur le bouton CLIC:

fonction clearInput ()
document.getElementByid ("formulaire").réinitialiser();

Sortir

Nous avons démontré les techniques pour effacer les champs d'entrée en JavaScript.

Conclusion

Pour effacer les champs d'entrée en JavaScript, utilisez le «onfocus«Événement et«cible«Propriété pour appliquer la fonctionnalité basée sur la présence d'une valeur particulière, ou le« «sur clic()«Événement et«document.getElementByid ()”Méthode pour obtenir l'ID du champ de saisie et effacer le champ tant qu'il y a une certaine valeur ou le"réinitialiser()”Méthode pour réinitialiser les valeurs de tous les champs de saisie à la fois. Cet article a expliqué les méthodes pour effacer les champs d'entrée spécifiés en JavaScript.