Comment obtenir la valeur de la zone de texte en javascript?

Dans le processus de conception de pages Web ou de sites réactives, il est nécessaire d'inviter l'utilisateur des données entrées afin d'assurer les données entrées correctes. Par exemple, confirmer les courriers et les mots de passe tapés. Dans l'autre cas, la connexion d'une erreur ou d'un avertissement sur une option sélectionnée qui pourrait conduire à une conséquence grave I.Virus E, etc. Dans de tels cas céréaliers, l'obtention de la valeur de la zone de texte en JavaScript est très utile pour maintenir la confidentialité des données.

Cet article expliquera les approches pour obtenir la valeur de la zone de texte en javascript.

Comment obtenir la valeur de la zone de texte en javascript?

La valeur de la zone de texte peut être récupérée en JavaScript en utilisant les approches suivantes:

• "getElementByid ()" méthode.
• "addEventListener ()" méthode.
• "jquery".

Approche 1: Obtenez la valeur de la zone de texte en JavaScript en utilisant la méthode GetElementById ()

Le "getElementByid ()"La méthode accède à un élément avec le" spécifié "identifiant".Cette méthode peut être implémentée pour récupérer le champ de texte d'entrée et retourner la valeur entrée dans elle.

Syntaxe

document.GetElementByid (élément)

Dans la syntaxe donnée:

• "élément" se réfère à la "identifiant«À récupérer contre l'élément particulier.

Exemple
Jetons un coup d'œil à l'exemple suivant:

Appliquons les étapes suivantes dans le code ci-dessous:

Obtenir la valeur de la zone de texte en JavaScript

Tapez quelque chose:
Obtenir de la valeur

Effectuez les étapes suivantes:

• Dans la première étape, spécifiez le titre indiqué.
• Après cela, incluez le champ de texte d'entrée avec le spécifié "identifiant" et "espace réservé" valeur.
• Créez également un bouton avec un "sur clic”Redirection des événements vers la fonction textaReavalue ()

Passons à la partie javascript du code:

Dans le code JavaScript ci-dessus:

• Déclarer une fonction nommée «textAreAavalue ()".
• Dans sa définition, accédez au champ de texte d'entrée par son ID spécifié en utilisant le «getElementByid ()" méthode.
• Appliquez également le «valeur”Propriété afin de récupérer la valeur du texte entrée.
• Enfin, affichez la valeur de la zone de texte via le «alerte»Boîte de dialogue.

Sortir

Dans la sortie ci-dessus, on peut observer que la valeur entrée est récupérée via la boîte de dialogue d'alerte.

Approche 2: Obtenez la valeur de la zone de texte en JavaScript à l'aide de la méthode AddeventListener ()

Le "addEventListener ()«La méthode est utilisée pour associer un«événement"Avec un élément. Cette méthode peut être utilisée pour attacher un événement à la fonction de telle sorte que la valeur de zone de texte soit récupérée sur chaque entrée côte à côte sur la console.

Syntaxe

élément.addEventListener (événement, fonction, exec)

Dans la syntaxe ci-dessus:

• "événement»Porte le nom de l'événement.
• "fonction»Indique la fonction pour exécuter sur le déclencheur d'un événement.
• "exécutif"Est le paramètre facultatif.

Exemple
Suivons l'exemple ci-dessous étape par étape:

Tapez quelque chose:

Dans le code-snippet ci-dessus:

• Spécifiez l'étiquette indiquée. Allouez également le «textarea»Élément avec la valeur spécifiée de«identifiant" et "espace réservé»Et ajustez également ses dimensions.
• Dans la partie JavaScript du code, accédez à la TextArea spécifiée à l'étape précédente et affichez-la à l'aide du "valeur" propriété.
• Dans l'étape suivante, joignez un événement "texte"Aux récupéré"zone de texte" en utilisant le "addEventListener ()"Méthode et l'appliquez à la fonction"textAreAavalue ()". Le "événement«Dans son argument, transmet des informations sur l'événement qui est déclenché.
• Cela entraînera la journalisation de chacune des valeurs de texte entrées côte à côte.

Sortir

De la sortie ci-dessus, le «aller chercher«De chacune des valeurs de texte entrées peut être observée.

Approche 3: Obtenez la valeur de la zone de texte en JavaScript en utilisant jQuery

"jquery«Peut être appliqué pour accéder au champ de texte d'entrée et déclencher ses fonctionnalités dès que le modèle d'objet de document (DOM) est chargé.

Exemple
Suivons l'exemple donné ci-dessous:

Tapez quelque chose:
Obtenir de la valeur

Dans les lignes de code ci-dessus, effectuez les étapes suivantes:

• Incluez la bibliothèque jQuery afin d'appliquer ses méthodes.
• Spécifie le "saisir«Comme champ de texte avec les valeurs spécifiées de«identifiant" et "espace réservé"Comme discuté précédemment.
• Créez également un bouton afin d'obtenir la valeur sur le bouton cliquer.

Passez à la partie javascript du code:

Suivez les étapes indiquées:

• Appliquer le "prêt()«Méthode afin d'appliquer les méthodes supplémentaires sur le DOM chargé.
• Accédez au bouton créé et attachez le «Cliquez sur()”Méthode qui exécutera la fonction indiquée dans son paramètre.
• La méthode click () accédera au champ de texte d'entrée spécifié et enregistrera la valeur de texte entrée sur la console.

Sortir

Par conséquent, la valeur du type est enregistrée sur la console.

Ce sont toutes les différentes façons d'obtenir la valeur de la zone de texte à l'aide de JavaScript.

Conclusion

Le "getElementByid ()"Méthode, le"addEventListener ()«Méthode ou le«jquery«Peut être utilisé pour obtenir la valeur de la zone de texte en JavaScript. La méthode GetElementById () peut être implémentée pour accéder au champ de texte d'entrée et afficher la valeur de zone de texte entrée via l'alerte. La méthode AddeventListener () peut être utilisée pour attacher un «saisir”Événement qui obtiendra la valeur du texte à chaque entrée côte à côte. La jQuery peut être appliquée pour accéder directement au bouton et récupérer la valeur du texte entrée sur le bouton cliquer sur la console. Ce tutoriel explique comment obtenir la valeur de la zone de texte en javascript.