Maison > interface Web > js tutoriel > Comment récupérer la valeur d'un champ de saisie de texte à l'aide de JavaScript ?

Comment récupérer la valeur d'un champ de saisie de texte à l'aide de JavaScript ?

Susan Sarandon
Libérer: 2024-12-22 17:12:22
original
1073 Les gens l'ont consulté

How to Retrieve the Value of a Text Input Field Using JavaScript?

Comment obtenir la valeur d'un champ de saisie de texte à l'aide de JavaScript

Vous pouvez obtenir la valeur d'un champ de saisie de texte en JavaScript en utilisant ces méthodes :

Méthode 1 : getElementById

document.getElementById('input_id').value;
Copier après la connexion

Méthode 2 : getElementsByClassName

document.getElementsByClassName('class_name')[0].value;
Copier après la connexion

Méthode 3 : getElementsByTagName

document.getElementsByTagName('input')[0].value;
Copier après la connexion

Méthode 4 : getElementsByName

document.getElementsByName('input_name')[0].value;
Copier après la connexion

Méthode 5 : querySelector

By ID :

document.querySelector('#input_id').value;
Copier après la connexion

Par classe :

document.querySelector('.class_name').value;
Copier après la connexion

Par nom de balise :

document.querySelector('input').value;
Copier après la connexion

Méthode 6 : querySelectorAll

Similaire à querySelector, mais renvoie un Liste de nœuds statique :

Par ID :

document.querySelectorAll('#input_id')[0].value;
Copier après la connexion

Par classe :

document.querySelectorAll('.class_name')[0].value;
Copier après la connexion

Par balise Nom :

document.querySelectorAll('input')[0].value;
Copier après la connexion

Exemple dans votre Code

Pour obtenir la valeur du champ de saisie de texte de recherche dans votre code, utilisez :

const searchTxtValue = document.getElementById('searchTxt').value;
Copier après la connexion

Support du navigateur

Browser Method 1 Method 2 Method 3 Method 4 Method 5/6
IE6 Y (Buggy) N Y Y (Buggy) N
IE7 Y (Buggy) N Y Y (Buggy) N
IE8 Y N Y Y (Buggy) Y
IE9 Y Y Y Y (Buggy) Y
IE10 Y Y Y Y Y
FF3.0 Y Y Y Y N
FF3.5/FF3.6 Y Y Y Y Y
FF4b1 Y Y Y Y Y
GC4/GC5 Y Y Y Y Y
Safari4/Safari5 Y Y Y Y Y
Opera10.10/
Opera10.53/ Y Y Y Y (Buggy) Y
Opera10.60
Opera 12 Y Y Y Y Y

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Derniers articles par auteur
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal