web-dev-qa-db-fra.com

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

Je travaille sur une recherche avec JavaScript. Je voudrais utiliser un formulaire, mais il gâche quelque chose d'autre sur ma page. J'ai ce champ 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 extraire la valeur du champ de texte en JavaScript?

javascriptdominput
708
user979331

Il existe différentes méthodes pour obtenir une valeur de zone de texte d'entrée directement (sans envelopper 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 boîte désirée

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

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

Méthode 2:

Utilisation document.getElementsByClassName('class_name')[whole_number].value qui retourne 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:

Utilisez document.getElementsByTagName('tag_name')[whole_number].value qui renvoie également une collection HTMLC en direct

Par exemple,document.getElementsByTagName("input")[0].value;, s'il s'agit du premier champ de texte de votre page.

Méthode 4:

document.getElementsByName('name')[whole_number].value qui> renvoie également une liste de nœuds active

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

Méthode 5:

Utilisez le puissant _document.querySelector('selector').value qui 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 la classe 
document.querySelector('input').value; sélectionné par la variable 
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 renvoie tous les éléments avec ce sélecteur en tant que liste de noeuds statique.

Par exemple,document.querySelectorAll('#searchTxt')[0].value; sélectionné par id 
document.querySelectorAll('.searchField')[0].value; sélectionné par la classe 
document.querySelectorAll('input')[0].value; sélectionné par la variable 
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 incluant plus de détails, cliquez ici
  2. Différence entre les collections statiques et les collections actives, cliquez ici
  3. Différence entre NodeList et HTMLCollection Cliquez ici
1514
bugwheels94
//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.

20
maudulus

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

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

Et puis je voudrais juste utiliser la variable pour ajouter la valeur d'entrée à la chaîne.

= "Your string" + input;

13
Vadim Tatarnikov

Aussi, vous pouvez appeler par noms de balises, comme ceci: form_name.input_name.value; Ainsi, vous aurez la valeur spécifique de l’entrée déterminée dans un formulaire spécifique.

12
user3768564

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 nécessite une compréhension minimale de JavaScript pour la création, l'amélioration et la modification.

7
Fredrik A.

Essaye celui-là

<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>
3
Hari Das

Testé sous 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éfinir 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/

Regardez également une implémentation de la calculatrice JavaScript: http://www.4stud.info/web-programming/samples/dhtml-calculator.html

UPDATE de @ bugwheels94: lors de l'utilisation de cette méthode, soyez conscient de ce problème .

2
GKislin

On peut utiliser le form.elements pour obtenir tous les éléments d'un formulaire. Si un élément a un identifiant, 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

1
Valter Ekholm

simple js

function copytext(text) {
    var textField = document.createElement('textarea');
    textField.innerText = text;
    document.body.appendChild(textField);
    textField.select();
    document.execCommand('copy');
    textField.remove();
}
0
Ricardo Luis Zuluaga Salazar
<input id="new" >
    <button  onselect="myFunction()">it</button>    
    <script>
        function myFunction() {
            document.getElementById("new").value = "a";    
        }
    </script>
0
Davinder Singh

Vous pouvez utiliser onkeyup lorsque vous avez plus de champs de saisie. Supposons que vous en ayez quatre ou que input.then document.getElementById('something').value soit ennuyeux. nous devons écrire 4 lignes pour extraire la valeur du champ de saisie.

Ainsi, vous pouvez créer une fonction qui stocke la valeur dans objet lors de l'é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>
0
Dhruv Raval