Comment puis-je obtenir la valeur d'un champ de saisie de texte à l'aide de JavaScript ?

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

Dans les scénarios où les éléments de formulaire peuvent perturber d'autres aspects d'une page Web, l'obtention du texte de saisie la valeur du champ devient directement nécessaire. JavaScript propose plusieurs méthodes pour y parvenir :

Méthode 1 : document.getElementById

document.getElementById('searchTxt').value;

Cette méthode récupère la valeur d'un champ de saisie par son ID.

Méthode 2 : document.getElementsByClassName

document.getElementsByClassName('searchField')[0].value;

Cette méthode sélectionne tous les champs de saisie avec une classe spécifique et renvoie une HTMLCollection. Utilisez [0] pour accéder au premier élément (s'il y a plusieurs éléments).

Méthode 3 : document.getElementsByTagName

document.getElementsByTagName('input')[0].value;

Cette méthode sélectionne tous les éléments d'entrée sur une page et renvoie une HTMLCollection. Encore une fois, utilisez [0] pour le premier élément.

Méthode 4 : document.getElementsByName

document.getElementsByName('searchTxt')[0].value;

Cette méthode récupère tous les champs de saisie avec un nom spécifique. Utilisez [0] pour la première occurrence.

Méthode 5 : document.querySelector

document.querySelector('#searchTxt').value;
document.querySelector('.searchField').value;

Cette méthode utilise des sélecteurs CSS pour sélectionner des éléments, permettant une récupération ciblée.

Méthode 6 : document.querySelectorAll

document.querySelectorAll('#searchTxt')[0].value;
document.querySelectorAll('.searchField')[0].value;

Semblable à document.querySelector, cette méthode utilise des sélecteurs CSS mais renvoie une NodeList de tous les éléments correspondants. Utilisez [0] pour le premier élément.

Support des navigateurs

Le tableau ci-dessous montre le niveau de support de ces méthodes dans différents navigateurs :

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/	Y	Y	Y	Y(Buggy)	Y
Opera10.53/	Y	Y	Y	Y	Y
Opera10.60	Y	Y	Y	Y	Y
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!