Wie erhalte ich den Wert des Texteingabefelds mit JavaScript?

Ich arbeite an einer Suche mit JavaScript. Ich würde ein Formular verwenden, aber es bringt etwas anderes auf meiner Seite durcheinander. Ich habe dieses Eingabetextfeld:

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

Und das ist mein JavaScript-Code:

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

Wie bekomme ich den Wert aus dem Textfeld in JavaScript?

Es gibt verschiedene Methoden, um einen Eingabetextfeldwert direkt abzurufen (ohne das Eingabeelement in ein Formularelement einzuschließen):

Methode 1:

document.getElementById('textbox_id').value um den Wert der gewünschten Box zu erhalten

Zum Beispiel, document.getElementById("searchTxt").value;

Hinweis: Die Methoden 2,3,4 und 6 geben eine Sammlung von Elementen zurück. Verwenden Sie daher [ganze_Nummer], um das gewünschte Vorkommen zu erhalten. Verwenden Sie für das erste Element [0], für das zweite 1 und so weiter ...

Methode 2:

Verwenden Sie document.getElementsByClassName('class_name')[whole_number].valuediese Option, um eine Live-HTMLCollection zurückzugeben

Zum Beispiel, document.getElementsByClassName("searchField")[0].value; wenn dies das erste Textfeld auf Ihrer Seite ist.

Methode 3:

Verwenden Sie document.getElementsByTagName('tag_name')[whole_number].valuediese Option, um auch eine Live-HTMLCollection zurückzugeben

Zum Beispiel, document.getElementsByTagName("input")[0].value; wenn dies das erste Textfeld auf Ihrer Seite ist.

Methode 4:

document.getElementsByName('name')[whole_number].value Dies gibt auch eine Live-NodeList zurück

Zum Beispiel, document.getElementsByName("searchTxt")[0].value; wenn dies das erste Textfeld mit dem Namen 'Suchtext' auf Ihrer Seite ist.

Methode 5:

Verwenden Sie die leistungsstarke document.querySelector('selector').valueOption, die einen CSS-Selektor verwendet, um das Element auszuwählen

Zum Beispiel document.querySelector('#searchTxt').value; ausgewählt durch ID
document.querySelector('.searchField').value;ausgewählt durch Klasse
document.querySelector('input').value;ausgewählt durch Tagname
document.querySelector('[name="searchTxt"]').value;ausgewählt durch Name

Methode 6:

document.querySelectorAll('selector')[whole_number].value Dabei wird auch ein CSS-Selektor zum Auswählen von Elementen verwendet, es werden jedoch alle Elemente mit diesem Selektor als statische Knotenliste zurückgegeben.

Zum Beispiel document.querySelectorAll('#searchTxt')[0].value; ausgewählt durch ID
document.querySelectorAll('.searchField')[0].value;ausgewählt durch Klasse
document.querySelectorAll('input')[0].value; ausgewählt durch Tagname
document.querySelectorAll('[name="searchTxt"]')[0].value;ausgewählt durch Name

Unterstützung

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

Nützliche Links

1. Klicken Sie hier, um die Unterstützung dieser Methoden mit allen Fehlern einschließlich weiterer Details anzuzeigen
2. Unterschied zwischen statischen Sammlungen und Live-Sammlungen Klicken Sie hier
3. Unterschied zwischen NodeList und HTMLCollection Klicken Sie hier

//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;
  }
}

Sehen Sie dies in Codepen.

Ich würde eine Variable erstellen, um die Eingabe wie folgt zu speichern:

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

Und dann würde ich einfach die Variable verwenden, um den Eingabewert zur Zeichenfolge hinzuzufügen.

= "Your string" + input;

Sie sollten in der Lage sein:

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"/>

Ich bin mir sicher, dass es bessere Möglichkeiten gibt, dies zu tun, aber diese scheint in allen Browsern zu funktionieren, und es erfordert ein minimales Verständnis von JavaScript, um sie zu erstellen, zu verbessern und zu bearbeiten.

Sie können auch Tags wie form_name.input_name.value; folgt aufrufen: So haben Sie den spezifischen Wert der bestimmten Eingabe in einer bestimmten Form.

Probier diese

<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>

Getestet in Chrome und Firefox:

Wert nach Element-ID abrufen:

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

Wert im Formularelement festlegen:

<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/

Schauen Sie sich auch eine JavaScript-Taschenrechner-Implementierung an: http://www.4stud.info/web-programming/samples/dhtml-calculator.html

UPDATE von @ bugwheels94: Wenn Sie diese Methode verwenden, beachten Sie dieses Problem .

Sie können onkeyup verwenden, wenn Sie mehr Eingabefelder haben. Angenommen, Sie haben vier oder Eingabe document.getElementById('something').value. Dann ist ärgerlich. Wir müssen 4 Zeilen schreiben, um den Wert des Eingabefeldes abzurufen.

Sie können also eine Funktion erstellen, die den Wert im Objekt beim Keyup- oder Keydown-Ereignis speichert.

Beispiel:

<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>

Man kann die form.elements verwenden, um alle Elemente in einem Formular abzurufen. Wenn ein Element eine ID hat, kann es mit .namedItem ("id") gefunden werden. Beispiel:

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

Quelle: w3schools

Wenn Sie inputsich in einem befinden formund nach dem Absenden einen Wert erhalten möchten, können Sie dies tun

<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>

Vorteil dieser Möglichkeit: Beispiel: Ihre Seite verfügt über 2 form Eingaben senderund receiverInformationen.

Wenn Sie nicht formfür den Abrufwert verwenden, dann
- können Sie 2 verschiedene id(oder tagoder name...) für jedes Feld wie sender-nameund receiver-name, sender-addressund receiver-address, ...
festlegen. - Wenn Sie denselben Wert für 2 Eingaben festlegen, dann nach getElementsByName(oder getElementsByTagName.. .) Sie müssen sich daran erinnern, dass 0 oder 1 senderoder ist receiver. Wenn Sie später die Reihenfolge 2 formin HTML ändern , müssen Sie diesen Code erneut überprüfen

Wenn Sie verwenden form, dann können Sie verwenden name, address...

<input id="new" >
    <button  onselect="myFunction()">it</button>    
    <script>
        function myFunction() {
            document.getElementById("new").value = "a";    
        }
    </script>

einfache js

function copytext(text) {
    var textField = document.createElement('textarea');
    textField.innerText = text;
    document.body.appendChild(textField);
    textField.select();
    document.execCommand('copy');
    textField.remove();
}

Sie können den Wert von lesen

searchTxt.value

function searchURL() {
   let txt = searchTxt.value;
   console.log(txt);
   // window.location = "http://www.myurl.com/search/" + txt; ...
}

document.querySelector('.search').addEventListener("click", ()=>searchURL());

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

<button class="search">Search</button>

Wenn Sie jQuery verwenden, müssen Sie nur das Plugin formInteract verwenden:

// Just keep the HTML as it is.

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

Fügen Sie am Ende der Seite einfach diese Plugin-Datei hinzu und schreiben Sie diesen 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
});

Oder wenn Sie eine parametrisierte URL verwenden, verwenden Sie diese:

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

Hier ist der Link zum Projekt https://bitbucket.org/ranjeet1985/forminteract

Sie können dieses Plugin für viele Zwecke verwenden, z. B. zum Abrufen des Werts eines Formulars, zum Einfügen von Werten in ein Formular, zum Überprüfen von Formularen und vieles mehr. Sie können ein Beispiel für Code in der Datei index.html des Projekts sehen.

Natürlich bin ich der Autor dieses Projekts und alle sind herzlich eingeladen, es besser zu machen.