Comment puis-je obtenir la valeur du champ de saisie de texte en utilisant JavaScript?

874

Je travaille sur une recherche avec JavaScript. J'utiliserais un formulaire, mais il gâche quelque chose d'autre sur ma page. J'ai ce champ de texte de saisie:

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

Et voici mon code JavaScript:

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

Comment puis-je obtenir la valeur du champ de texte dans JavaScript?

user979331
la source

Réponses:

1770

Il existe différentes méthodes pour obtenir directement une valeur de zone de texte d'entrée (sans encapsuler l'élément d'entrée dans un élément de formulaire):

Méthode 1:

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

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

 

Remarque: Les méthodes 2, 3, 4 et 6 renvoient une collection d'éléments, utilisez donc [numéro_entier] pour obtenir l'occurrence souhaitée. Pour le premier élément, utilisez [0], pour le second, utilisez 1 , etc.

Méthode 2:

Utilisation document.getElementsByClassName('class_name')[whole_number].valuequi renvoie une Live HTMLCollection

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

Méthode 3:

Utilisation document.getElementsByTagName('tag_name')[whole_number].valuequi 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 votre page.

Méthode 4:

document.getElementsByName('name')[whole_number].value qui renvoie également une NodeList en direct

Par exemple, document.getElementsByName("searchTxt")[0].value; s'il s'agit de la première zone de texte portant le nom «searchtext» dans votre page.

Méthode 5:

Utilisez le puissant document.querySelector('selector').valuequi utilise un sélecteur CSS 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é par nom

Méthode 6:

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

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é par 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
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=YES,N=NO
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

Liens utiles

  1. Pour voir le support de ces méthodes avec tous les bugs, y compris plus de détails, cliquez ici
  2. Différence entre les collections statiques et les collections Live, cliquez ici
  3. Différence entre NodeList et HTMLCollection cliquez ici
bugwheels94
la source
IE8 prend en charge QSA pour autant que je puisse voir, il ne prend tout simplement pas en charge les sélecteurs CSS3 dans la chaîne de sélection.
Fabrício Matté
@ FabrícioMatté je viens de vérifier ici quirksmode.org/dom/tests/basics.html#querySelectorAll et il m'a dit que ce
n'était
Intéressant. Un test simple dans IE8 pour Win7 montre que jsfiddle.net/syNvz/show querySelectorest également pris en charge et QSA aussi jsfiddle.net/syNvz/2/show
Fabrício Matté
1
Document extrêmement utile, enregistré pour référence. Merci.
Andy
1
@GKislin Ah! Je vois. C'est bien que je n'en sois pas au courant. Mais après avoir lu ceci , je suis réticent à ajouter cette modification à la réponse en ce moment. Peut-être qu'un jour plus tard, je l'ajouterai avec un avertissement pour l'éviter. L'une des raisons de l'avertissement serait la suivante . Si vous pensez que c'est vraiment sympa, alors faites une modification avec un avertissement ou ajoutez une autre réponse à votre souhait :)
bugwheels94
33
//creates a listener for when you press a key
window.onkeyup = keyup;

//creates a global Javascript variable
var inputTextValue;

function keyup(e) {
  //setting your input text to the global Javascript Variable for every key press
  inputTextValue = e.target.value;

  //listens for you to press the ENTER key, at which point your web address will change to the one you have input in the search box
  if (e.keyCode == 13) {
    window.location = "http://www.myurl.com/search/" + inputTextValue;
  }
}

Voir ce fonctionnement dans codepen.

maudulus
la source
Bien que j'apprécie l'exhaustivité de la réponse acceptée, j'ai trouvé cette réponse utile: accéder, en code JS, à une valeur entrée dans un élément de saisie de texte DOM (zone de texte). Pour plus de détails, voir ma réponse, ailleurs dans cette question.
Victoria Stuart
17

Je créerais une variable pour stocker l'entrée comme ceci:

var input = document.getElementById("input_id").value;

Et puis j'utiliserais simplement la variable pour ajouter la valeur d'entrée à la chaîne.

= "Your string" + input;

Vadim Tatarnikov
la source
Si vous voulez que ce soit un objet javascript approprié afin que vous puissiez accéder par programme à chaque propriété, faites simplement: var input = JSON.parse (document.getElementById ("input_id"). Value);
JakeJ
15

Vous devriez pouvoir taper:

var input = document.getElementById("searchTxt");

function searchURL() {
     window.location = "http://www.myurl.com/search/" + input.value;
}
<input name="searchTxt" type="text" maxlength="512" id="searchTxt" class="searchField"/>

Je suis sûr qu'il existe de meilleures façons de le faire, mais celui-ci semble fonctionner sur tous les navigateurs, et il nécessite une compréhension minimale de JavaScript pour créer, améliorer et modifier.

Fredrik A.
la source
14

Vous pouvez également appeler par des noms de balises, comme ceci: form_name.input_name.value; Ainsi, vous aurez la valeur spécifique de l'entrée déterminée sous une forme spécifique.

user3768564
la source
Oui! J'ai été surpris de cette simplicité. Jetez un oeil à la réalisation de calculatrice simple 4stud.info/web-programming/samples/dhtml-calculator.html Est ther toute référence à cette functiality javascript, parce que je avant de toujours utiliser jQuery ou getElementById
Grigory Kislin
5

Essaye celui-là

<input type="text" onkeyup="trackChange(this.value)" id="myInput">
<script>
function trackChange(value) {
    window.open("http://www.google.com/search?output=search&q=" + value)
}
</script>
Hari Das
la source
4

Testé dans Chrome et Firefox:

Obtenir la valeur par identifiant d'élément:

<input type="text" maxlength="512" id="searchTxt" class="searchField"/>
<input type="button" value="Get Value" onclick="alert(searchTxt.value)">

Définissez la valeur dans l'élément de formulaire:

<form name="calc" id="calculator">
  <input type="text" name="input">
  <input type="button" value="Set Value" onclick="calc.input.value='Set Value'">
</form>

https://jsfiddle.net/tuq79821/

Jetez également un œil à l'implémentation d'une calculatrice JavaScript: http://www.4stud.info/web-programming/samples/dhtml-calculator.html

MISE À JOUR de @ bugwheels94: lorsque vous utilisez cette méthode, soyez conscient de ce problème .

Grigory Kislin
la source
3

Vous pouvez utiliser onkeyup lorsque vous avez plus de champ de saisie. Supposons que vous en ayez quatre ou une entrée, ce qui document.getElementById('something').valueest ennuyeux. nous devons écrire 4 lignes pour récupérer la valeur du champ de saisie.

Ainsi, vous pouvez créer une fonction qui stocke la valeur dans l'objet lors d'un événement keyup ou keydown.

Exemple :

<div class="container">
    <div>
        <label for="">Name</label>
        <input type="text" name="fname" id="fname" onkeyup=handleInput(this)>
    </div>
    <div>
        <label for="">Age</label>
        <input type="number" name="age" id="age" onkeyup=handleInput(this)>
    </div>
    <div>
        <label for="">Email</label>
        <input type="text" name="email" id="email" onkeyup=handleInput(this)>
    </div>
    <div>
        <label for="">Mobile</label>
        <input type="number" name="mobile" id="number" onkeyup=handleInput(this)>
    </div>
    <div>
        <button onclick=submitData()>Submit</button>
    </div>
</div>

javascript:

<script>
    const data={ };
    function handleInput(e){
        data[e.name] = e.value;
    }
    function submitData(){
        console.log(data.fname); //get first name from object
        console.log(data); //return object
    }
</script>
Dhruv Raval
la source
2

On peut utiliser les form.elements pour obtenir tous les éléments d'un formulaire. Si un élément a un id, il peut être trouvé avec .namedItem ("id"). Exemple:

var myForm = document.getElementById("form1");
var text = myForm.elements.namedItem("searchTxt").value;
var url = "http://www.myurl.com/search/" + text;

Source: w3schools

Valter Ekholm
la source
2

Si vous êtes inputdans un formet que vous souhaitez obtenir de la valeur après la soumission, vous pouvez faire comme

<form onsubmit="submitLoginForm(event)">
    <input type="text" name="name">
    <input type="password" name="password">
    <input type="submit" value="Login">
</form>

<script type="text/javascript">

    function submitLoginForm(event){
        event.preventDefault();

        console.log(event.target['name'].value);
        console.log(event.target['password'].value);
    }
</script>

Avantage de cette façon: Exemple, votre page en a 2 form pour la saisie senderet l' receiverinformation.

Si vous n'utilisez pas formpour obtenir la valeur, alors
- Vous pouvez définir 2 différents id(ou tagou name...) pour chaque champ comme sender-nameet receiver-name, sender-addresset receiver-address, ...
- Si vous définissez la même valeur pour 2 entrées, puis après getElementsByName(ou getElementsByTagName.. .) vous devez vous rappeler que 0 ou 1 est senderou receiver. Plus tard, si vous modifiez l'ordre de 2 formen html, vous devez vérifier à nouveau ce code

Si vous utilisez form, vous pouvez utiliser name, address...

Phan Van Linh
la source
1
<input id="new" >
    <button  onselect="myFunction()">it</button>    
    <script>
        function myFunction() {
            document.getElementById("new").value = "a";    
        }
    </script>
Davinder Singh
la source
1

js simple

function copytext(text) {
    var textField = document.createElement('textarea');
    textField.innerText = text;
    document.body.appendChild(textField);
    textField.select();
    document.execCommand('copy');
    textField.remove();
}
Ricardo Luis Zuluaga Salazar
la source
-2

Vous pouvez lire la valeur en

searchTxt.value

Kamil Kiełczewski
la source
-3

Si vous utilisez jQuery puis en utilisant le plugin formInteract, il vous suffit de faire ceci:

// Just keep the HTML as it is.

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

Au bas de la page, incluez simplement ce fichier de plugin et écrivez ce code:

// Initialize one time at the bottom of the page.
var search= $("#searchTxt).formInteract();

search.getAjax("http://www.myurl.com/search/", function(rsp){
    // Now do whatever you want to with your response
});

Ou si vous utilisez une URL paramétrée, utilisez ceci:

$.get("http://www.myurl.com/search/"+search.get().searchTxt, {}, function(rsp){
    // Now do work with your response;
})

Voici le lien vers le projet https://bitbucket.org/ranjeet1985/forminteract

Vous pouvez utiliser ce plugin à de nombreuses fins, comme obtenir la valeur d'un formulaire, mettre des valeurs dans un formulaire, valider des formulaires et bien d'autres. Vous pouvez voir un exemple de code dans le fichier index.html du projet.

Bien sûr, je suis l'auteur de ce projet et tous sont les bienvenus pour l'améliorer.

Ranjeet Rana
la source
7
Vous devriez probablement mentionner qu'il s'agit de votre propre plugin personnel.
Hanna
Il y a une faute de frappe dans les extraits de code. Dans la deuxième partie du code, un guillemet double est manquant.
Vincenzo