Jak uzyskać wartość pola wprowadzania tekstu za pomocą JavaScript?

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

Zobacz to działanie w codepen.

Stworzyłbym zmienną do przechowywania danych wejściowych w następujący sposób:

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

I wtedy użyłbym zmiennej, aby dodać wartość wejściową do łańcucha.

= "Your string" + input;

Powinieneś umieć wpisać:

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

Jestem pewien, że istnieją lepsze sposoby, aby to zrobić, ale ten wydaje się działać we wszystkich przeglądarkach i wymaga minimalnego zrozumienia JavaScript, aby tworzyć, ulepszać i edytować.

Możesz również wywoływać po tagach nazwy, jak to: form_name.input_name.value; Więc będziesz miał określoną wartość ustalonego wejścia w określonej formie.

Spróbuj tego

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

Testowane w Chrome i Firefox:

Get value by element id:

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

Ustaw wartość w elemencie formularza:

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

Spójrz również na implementację kalkulatora JavaScript: http://www.4stud.info/web-programming/samples/dhtml-calculator.html

UPDATE from @ bugwheels94: podczas korzystania z tej metody należy pamiętać o ten problem .

Jeśli twoje input jest w form i chcesz uzyskać wartość po przesłaniu możesz zrobić jak

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

Korzyści z tego sposobu: przykład Twoja strona ma 2 form dla informacji wejściowych sender i receiver.

Jeśli nie używasz form Dla get value, to
- Możesz ustawić 2 różne id (lub tag lub name...) dla każdego pola typu sender-name i receiver-name, sender-address i receiver-address,...
- Jeżeli ustawiono taką samą wartość dla 2 wejść, to po getElementsByName (lub getElementsByTagName...) musisz pamiętaj, że 0 LUB 1 to sender lub receiver. Później, jeśli zmienisz kolejność 2 form w html, musisz ponownie sprawdzić ten kod

Jeśli używasz form, możesz użyć name, address, ...

Można użyć formularza.elementy, aby uzyskać wszystkie elementy w formie. Jeśli element ma id, można go znaleźć za pomocą .namedItem ("id"). Przykład:

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

Źródło: w3schools

Możesz użyć onkeyup, gdy masz więcej pól wejściowych. Załóżmy, że masz cztery lub wejście.wtedy To irytujące. musimy napisać 4 linie, aby pobrać wartość pola wejściowego.

Można więc utworzyć funkcję, która przechowuje wartość w obiekcie w zdarzeniu keyup lub keydown.

Przykład:

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

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

Simple js

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

Możesz odczytać wartość przez

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>

UPDATE

Widzę wiele downvotów, ale wszelkie komentarze - jednak (dla przyszłych czytelników) faktycznie to rozwiązanie Działa

Spróbuj tego ..

function handleValueChange() {
    var y = document.getElementById('textbox_id').value;
    var x = document.getElementById('result');
    x.innerHTML = y;
}

function changeTextarea() {
  var a = document.getElementById('text-area').value;
  var b = document.getElementById('text-area-result');
  b.innerHTML = a;
}

input {
  padding: 5px;
}

p {
  white-space: pre;
}

<input type="text" id="textbox_id" placeholder="Enter string here..." oninput="handleValueChange()">
<p id="result"></p>

<textarea name="" id="text-area" cols="20" rows="5" oninput="changeTextarea()"></textarea>
<p id="text-area-result"></p>

Jeśli używasz jQuery, to używając wtyczki formInteract, wystarczy to zrobić:

// Just keep the HTML as it is.

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

Na dole strony po prostu dołącz ten plik wtyczki i napisz ten kod:

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

Lub jeśli używasz sparametryzowanego adresu URL, użyj tego:

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

Oto link do projektu https://bitbucket.org/ranjeet1985/forminteract

Możesz użyć tej wtyczki do wielu celów, takich jak uzyskanie wartości formularza, wprowadzenie wartości do formularza, Walidacja formularzy i wiele więcej. Możesz zobaczyć przykładowy kod w indeksie.plik html projektu.

Oczywiście jestem autorem tego projektu i wszyscy są mile widziani, aby go ulepszyć.