Comment obtenir la valeur d'un champ de texte de saisie en JavaScript ?

Obtention des valeurs d'un champ de texte de saisie en JavaScript

En réponse à votre requête, plusieurs méthodes sont disponibles pour récupérer la valeur d'un champ de texte de saisie directement sans utiliser de formulaires.

Méthode 1 : Utiliser getElementById()

document.getElementById('textbox_id').value récupère directement la valeur du champ de saisie de texte souhaité.

document.getElementById("searchTxt").value; // Get the value of the searchTxt text field

Méthode 2 : Utilisation getElementsByClassName()

document.getElementsByClassName('class_name')[whole_number].value renvoie une HTMLCollection en direct et peut être utilisée pour sélectionner le champ de texte souhaité en fonction de sa classe.

document.getElementsByClassName("searchField")[0].value; // Get the value of the first text field with class "searchField"

Méthode 3 : Utilisation getElementsByTagName()

document.getElementsByTagName('input')[whole_number].value renvoie également une HTMLCollection en direct et vous permet de sélectionner le champ de texte souhaité en fonction de son nom de balise.

document.getElementsByTagName("input")[0].value; // Get the value of the first text input field

Méthode 4 : Utiliser getElementsByName()

document.getElementsByName('name')[whole_number].value renvoie une NodeList en direct et peut être utilisée pour sélectionner le champ de texte souhaité en fonction de son attribut de nom.

document.getElementsByName("searchTxt")[0].value; // Get the value of the first text field with name "searchTxt"

Méthode 5 : Utiliser querySelector()

document.querySelector('selector').value utilise un sélecteur CSS pour sélectionner le champ de texte souhaité.

document.querySelector('#searchTxt').value; // Get the value of the text field with id "searchTxt"

Méthode 6 : Utilisation de querySelectorAll ()

document.querySelectorAll('selector')[whole_number].value utilise également un sélecteur CSS pour sélectionner le champ de texte souhaité, mais renvoie une NodeList statique.

document.querySelectorAll('.searchField')[0].value; // Get the value of the first text field with class "searchField"

Le tableau ci-dessous fournit des informations de compatibilité du navigateur pour ces méthodes :

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

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!