Astuce JavaScript : obtenez la valeur d'un champ de saisie de texte

Question

J'utilise JavaScript pour effectuer une recherche. Je souhaite utiliser un formulaire mais cela cassera d'autres éléments sur ma page. J'ai ce champ de texte de saisie :

≪/pré>
Voici mon code JavaScript : 

≪/pré>
Comment passer la valeur d'un champ texte à JavaScript ? 
            

Answer 1

//创建一个监听器，当你按下一个键时触发
window.onkeyup = keyup;

//创建一个全局的Javascript变量
var inputTextValue;

function keyup(e) {
  //将你的输入文本设置为全局的Javascript变量，每次按键都会更新
  inputTextValue = e.target.value;

  //监听你按下回车键，此时你的网址将会改变为你在搜索框中输入的网址
  if (e.keyCode == 13) {
    window.location = "http://www.myurl.com/search/" + inputTextValue;
  }
}

Découvrez cette fonctionnalité dans codepen.

Answer 2

Il existe plusieurs façons d'obtenir directement la valeur d'une zone de texte de saisie (sans envelopper l'élément de saisie dans un élément de formulaire) :

Méthode 1

document.getElementById('textbox_id').value Obtenez la valeur de la case requise

Par exemple

document.getElementById("searchTxt").value;

Remarque : Les méthodes 2, 3, 4 et 6 renvoient une collection d'éléments, utilisez donc [integer] pour obtenir l'élément requis. Pour le premier élément, utilisez [0]，对于第二个元素，使用[1] et ainsi de suite...

Méthode 2

Utilisé document.getElementsByClassName('class_name')[整数].value, il renvoie une HTMLCollection en direct

Par exemple

document.getElementsByClassName("searchField")[0].value; s'il s'agit de la première zone de texte de la page.

Méthode 3

Utilisez document.getElementsByTagName('tag_name')[整数].value qui renvoie également une HTMLCollection en direct

Par exemple

document.getElementsByTagName("input")[0].value; s'il s'agit de la première zone de texte de la page.

Méthode 4

document.getElementsByName('name')[整数].value, il renvoie également une NodeList en direct

Par exemple

document.getElementsByName("searchTxt")[0].value; s'il s'agit de la première zone de texte nommée « texte de recherche » sur la page.

Méthode 5

Utilisez un document.querySelector('selector').value puissant qui utilise des sélecteurs CSS pour sélectionner des éléments

Par exemple

• document.querySelector('#searchTxt').value; Sélectionnez par identifiant
• document.querySelector('.searchField').value; Sélectionnez par classe
• document.querySelector('input').value; Sélectionnez par nom de tag
• document.querySelector('[name="searchTxt"]').value; Sélectionnez par nom

Méthode 6

document.querySelectorAll('selector')[整数].value, Il utilise également des sélecteurs CSS pour sélectionner des éléments, mais il renvoie tous les éléments avec ce sélecteur sous forme de NodeList statique.

Par exemple

• document.querySelectorAll('#searchTxt')[0].value; Sélectionnez par identifiant
• document.querySelectorAll('.searchField')[0].value; Sélectionnez par classe
• document.querySelectorAll('input')[0].value; Sélectionnez par nom de tag
• document.querySelectorAll('[name="searchTxt"]')[0].value; Sélectionnez par nom

Support

Navigateur	Méthode 1	Méthode 2	Méthode 3	Méthode 4	Méthode 5/6
IE6	Y(question)	N	Y	Y(question)	N
IE7	Y(question)	N	Y	Y(question)	N
IE8	Y	N	Y	Y(question)	Y
IE9	Y	Y	Y	Y(question)	Y
IE10	Y	Y	Y	Y	Y
FF3.0	Y	Y	Y	Y	N IE=Internet Explorer
FF3.5/FF3.6	Y	Y	Y	Y	Y FF=Mozilla Firefox
FF4b1	Y	Y	Y	Y	Y GC=Google Chrome
GC4/GC5	Y	Y	Y	Y	Y Y=OUI,N=NON
Safari4/Safari5	Y	Y	Y	Y	Y
Opéra10.10/
Opéra10.53/	Y	Y	Y	Y(question)	Y
Opéra10.60
Opéra 12	Y	Y	Y	Y	Y