Javascript obtenir de texte de saisie de la valeur

Question

Je suis en train de travailler sur un peu une recherche avec Javascript, je voudrais utiliser un formulaire mais il bousille quelque chose d'autre sur ma page...de toute façons j'ai ce champ de saisie de texte...

<input name="searchTxt" type="text" maxlength="512" id="searchTxt" class="searchField"/>

et c'est mon javascript

<script type="text/javascript">
function searchURL(){
    window.location = "http://www.myurl.com/search/" + (input text value);
}
</script>

Ma question est comment puis-je obtenir la valeur du champ de texte en javascript?

Answer 1

Il existe différentes méthodes pour obtenir la zone de texte de saisie de la valeur:

Méthode 1:

document.getElementById('textbox_id').value pour obtenir la valeur de zone souhaitée

Par exemple. document.getElementById("searchTxt").value;

 

Remarque : la Méthode de 2,3,4 et 6 renvoie une collection d'éléments appelés NodeList, afin de l'utiliser [whole_number] pour obtenir le désiré occurence, pour le premier élément, utilisez [0] et pour la deuxième on utilise 1 et ainsi de suite...

Méthode 2:

Utilisation document.getElementsByClassName('class_name')[whole_number].value qui retourne Vivre Nodelist

Par exemple. document.getElementsByClassName("searchField")[0].value;si c'est la première zone de texte dans votre page.

Méthode 3:

Utiliser document.getElementsByTagName('tag_name')[whole_number].value qui renvoie également un live nodelist

Par exemple. document.getElementsByTagName("input")[0].value; ,si c'est la première zone de texte dans votre page.

Méthode 4:

document.getElementsByName('name')[whole_number].value

Par exemple. document.getElementsByName("searchTxt")[0].value; si c'est la première zone de texte avec le nom "texterecherché" dans votre page.

Méthode 5:

Utilisez de puissants document.querySelector('selector').value qui utilise CSS sélecteur pour sélectionner l'élément

Par exemple. document.querySelector('#searchTxt').value; sélectionné par id document.querySelector('.searchField').value; sélectionné par classe document.querySelector('input').value; sélectionné par tagname document.querySelector('[name="searchTxt"]').value; sélectionnés par leur nom

Méthode 6:

document.querySelectorAll('selector')[whole_number].value qui utilise également le sélecteur CSS pour sélectionner des éléments, mais il renvoie tous les éléments avec ce sélecteur statique nodelist.

Par exemple. document.querySelectorAll('#searchTxt')[0].value; sélectionné par id document.querySelectorAll('.searchField')[0].value; sélectionné par classe document.querySelectorAll('input')[0].value; sélectionné par tagname
document.querySelectorAll('[name="searchTxt"]')[0].value; sélectionnés par leur nom

Soutien

Browser     Method1      Method2 Method3   Method4   Method5/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
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=YES,N=NO
Safari4/Safari5 Y           Y       Y       Y           Y
Opera10.10/
Opera10.53/     Y           Y       Y       Y(Buggy)    Y
Opera10.60

Liens utiles

1. Pour voir le soutien de ces méthodes avec tous les bogues, y compris plus de détails cliquez ici
2. Différence Entre la Statique et de Vivre nodelist cliquez Ici

Answer 2

window.onkeyup = keyup;
function keyup(e) {
  console.log(e.target.value)
}

Answer 3

Vous devriez être en mesure de taper:

<input name="searchTxt" type="text" maxlength="512" id="searchTxt" class="searchField"/>

<script>
    var input = document.getElementById("searchTxt");

    function searchURL() {
         window.location = "http://www.myurl.com/search/" + input.value;
    }
</script>

Je suis sûr qu'il y a de meilleures façons de le faire, mais celui-ci semble fonctionner sur tous les navigateurs, et il nécessite un minimum de compréhension de JS pour faire/améliorer/modifier.

Answer 4

Vous pouvez aussi, appel par les étiquettes des noms, comme ceci: form_name.input_name.value; De sorte que vous aurez à la valeur d'entrée dans un formulaire spécifique.

Answer 5

Essayez celui-ci

<input type="text" onKeyUP="trackChange(this.value)" id="myInput">
<script>
function trackChange(value)
{

window.open("http://www.google.co.in/search?output=search&q="+value)

}
</script>