Comment obtenir et définir la valeur du texte d'entrée dans JavaScript

Sur la plupart des pages Web, il est nécessaire d'obtenir la valeur du texte d'entrée des utilisateurs afin d'entrer les données correctes et d'assurer la sécurité des données. Par exemple, vous devez obtenir, définir ou stocker des données spécifiques pour les utiliser pour un traitement ultérieur. Dans de tels cas, l'obtention et la définition de la valeur du texte d'entrée en JavaScript devient très utile pour protéger la confidentialité des données.

Cet article démontrera les méthodes pour obtenir et définir des valeurs de texte d'entrée dans JavaScript.

Comment obtenir et définir la valeur du texte d'entrée dans JavaScript?

Pour obtenir et définir la valeur du texte d'entrée en javascript, utilisez:

• "getElementByid ()" méthode
• "getElementByClassName ()" méthode
• "QuerySelector ()" méthode

Passer par chacune des méthodes mentionnées une par une!

Méthode 1: Obtenez et définissez la valeur du texte d'entrée dans JavaScript à l'aide du document.Méthode GetElementById ()

Le "getElementByid ()»La méthode accède à un élément avec l'ID spécifié. Cette méthode peut être appliquée pour accéder aux ID des champs de saisie et des boutons pour obtenir et définir la valeur du texte.

Syntaxe

document.GetElementByid (EleMedId)

Ici, "élémentID»Fait référence à l'ID spécifié d'un élément.

L'exemple ci-dessous explique le concept discuté.

Exemple
Tout d'abord, incluez deux champs de type d'entrée et des boutons séparés pour obtenir et définir les valeurs de texte d'entrée avec le «sur clic»Événements qui accéderont aux fonctions spécifiées:

Obtenir de la valeur
Valeur réglée

Ensuite, obtenez la valeur du champ de saisie à l'aide du document.Méthode GetElementById ():

document.getElementByid ('getText').value = "entrée ici";

Maintenant, déclarez une fonction nommée «getandSeTText ()". Ici, récupérez le champ de saisie avec le «gettext”ID et passez la valeur d'entrée au champ de saisie suivant ayant«Définir le texte" identifiant:

function getAndSeTText ()
var setText = document.getElementByid ('getText').valeur;
document.getElementById ('setText').value = setText;

De même, définissez une fonction nommée «getText ()". Après cela, obtenez le champ de saisie avec «gettext”ID et transmettez la valeur particulière à la boîte d'alerte pour obtenir la valeur du texte d'entrée:

fonction getText ()
var getText = document.getElementByid ('getText').valeur;
alert (getText);

Sortir

Méthode 2: Obtenez et définissez la valeur du texte d'entrée dans JavaScript à l'aide du document.Méthode GetElementByClassName ()

Le "getElementByClassName ()»La méthode accède à un élément à l'aide du nom de classe spécifié. Cette méthode, de même, peut être appliquée pour accéder à la classe du champ de saisie et des boutons pour entrer et définir la valeur du texte.

Syntaxe

document.getElementsByClassName (className)

Dans la syntaxe ci-dessus, le «nom du cours»Représente le nom de classe des éléments.

Exemple
Semblable à l'exemple précédent, nous accéderons d'abord au premier champ de saisie avec le «gettext" nom du cours. Ensuite, définissez une fonction nommée «getandSeTText ()»Et obtenez le champ de saisie spécifié en fonction de son nom de classe et définissez la valeur dans le champ de saisie suivante:

document.getElementByClassName ('getText').value = "entrée ici";
function getandSeTText ()

var setText = document.getElementByClassName ('getText').valeur;
document.getElementById ('setText').value = setText;

De même, définissez une fonction nommée «getText ()», Ajoutez le nom de classe du premier champ de saisie et passez la valeur particulière à la boîte d'alerte pour afficher la valeur récupérée:

fonction getText ()
var getText = document.getElementByClassName ('getText').valeur;
alert (getText);

Cette implémentation produira la sortie suivante:

Méthode 3: Obtenez et définissez la valeur du texte d'entrée dans JavaScript à l'aide de «Document.Méthode QueySelector () ”

Le "document.QuerySelector ()”Rechet le premier élément qui correspond au sélecteur spécifié, et la méthode addeventListener () peut ajouter un gestionnaire d'événements à l'élément sélectionné. Ces méthodes peuvent être appliquées pour obtenir l'ID du champ de saisie et des boutons et appliquer un gestionnaire d'événements.

Syntaxe

document.QueySelector (sélecteurs CSS)

Ici, "Sélecteurs CSS»Reportez-vous à un ou plusieurs sélecteurs CSS.

Regardez l'exemple suivant.

Exemple
Tout d'abord, incluez les types d'entrée avec leurs valeurs d'espace réservé et leurs boutons pour obtenir et définir les valeurs de texte d'entrée:

OBTENIR

ENSEMBLE

Ensuite, récupérez les champs d'entrée et les boutons ajoutés à l'aide du "document.QuerySelector ()" méthode:

Let Buttonget = document.queySelector ('# get');
LET ButtonSet = Document.queySelector ('# set');
Let GetInput = document.queySelector ('# input-get');
Soit setInput = document.queySelector ('# input-set');
Let résultat = documenter.queySelector ('# result');

Ensuite, incluez un gestionnaire d'événements nommé «Cliquez sur«Pour que les deux boutons puissent obtenir et définir les valeurs, respectivement:

flèche.addEventListener ('click', () =>
résultat.innerText = getInput.valeur;
);
bouton.addEventListener ('click', () =>
GetInput.valeur = setInput.valeur;
);

Sortir

Nous avons discuté des méthodes les plus simples pour obtenir et définir la valeur du texte d'entrée dans JavaScript.

Conclusion

Pour obtenir et définir la valeur du texte d'entrée en JavaScript, utilisez le «document.getElementByid ()«Méthode ou le

"document.getElementByClassName ()”Méthode pour accéder au champ de saisie et à des boutons spécifiés en fonction de leurs ID ou du nom de classe, puis définissez leurs valeurs. De plus, le «document.QuerySelector ()»Peut également être utilisé pour obtenir et définir des valeurs de texte d'entrée dans JavaScript. Ce blog a expliqué les méthodes pour obtenir et définir des valeurs de texte d'entrée dans JavaScript.