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


873

Pracuję nad wyszukiwaniem w JavaScript. Chciałbym skorzystać z formularza, ale zawiera on coś innego na mojej stronie. Mam to pole tekstowe wejściowe:

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

A to jest mój kod JavaScript:

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

Jak uzyskać wartość z pola tekstowego do JavaScript?

Odpowiedzi:


1768

Istnieją różne metody bezpośredniego uzyskiwania wejściowej wartości pola tekstowego (bez zawijania elementu wejściowego wewnątrz elementu formularza):

Metoda 1:

document.getElementById('textbox_id').value aby uzyskać wartość żądanego pola

Na przykład, document.getElementById("searchTxt").value;

 

Uwaga: Metoda 2, 3, 4 i 6 zwraca kolekcję elementów, więc użyj [liczba_całkowita], aby uzyskać pożądane wystąpienie. Dla pierwszego elementu użyj [0], dla drugiego użyj 1 i tak dalej ...

Metoda 2:

Użyj, document.getElementsByClassName('class_name')[whole_number].valuektóra zwraca Live HTMLCollection

Na przykład, document.getElementsByClassName("searchField")[0].value; jeśli jest to pierwsze pole tekstowe na twojej stronie.

Metoda 3:

Użyj, document.getElementsByTagName('tag_name')[whole_number].valuektóra zwraca również HTMLCollection na żywo

Na przykład, document.getElementsByTagName("input")[0].value; jeśli jest to pierwsze pole tekstowe na Twojej stronie.

Metoda 4:

document.getElementsByName('name')[whole_number].value który również> zwraca aktywną listę NodeList

Na przykład, document.getElementsByName("searchTxt")[0].value; jeśli jest to pierwsze pole tekstowe o nazwie „tekst wyszukiwania” na stronie.

Metoda 5:

Użyj potężnego, document.querySelector('selector').valuektóry używa selektora CSS, aby wybrać element

Na przykład document.querySelector('#searchTxt').value; wybrany przez id
document.querySelector('.searchField').value;wybrany przez klasę
document.querySelector('input').value;wybrany przez zmienną
document.querySelector('[name="searchTxt"]').value;wybraną przez nazwę

Metoda 6:

document.querySelectorAll('selector')[whole_number].value który również używa selektora CSS do wybierania elementów, ale zwraca wszystkie elementy z tym selektorem jako statyczną listę węzłów.

Na przykład document.querySelectorAll('#searchTxt')[0].value; wybrany przez id
document.querySelectorAll('.searchField')[0].value;wybrany przez klasę
document.querySelectorAll('input')[0].value; wybrany przez zmienną
document.querySelectorAll('[name="searchTxt"]')[0].value;wybraną przez nazwę

Wsparcie

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

Przydatne linki

  1. Aby zobaczyć wsparcie tych metod dla wszystkich błędów, w tym więcej szczegółów, kliknij tutaj
  2. Różnica między kolekcjami statycznymi a aktywnymi kliknij tutaj
  3. Różnica między NodeList a HTMLCollection kliknij tutaj

IE8 obsługuje QSA, o ile widzę, po prostu nie obsługuje selektorów CSS3 w ciągu selektora.
Fabrício Matté

@ FabrícioMatté Właśnie sprawdziłem tutaj quirksmode.org/dom/tests/basics.html#querySelectorAll i powiedział mi, że tak nie jest
bugwheels94

Ciekawy. Prosty test w IE8 dla Win7 pokazuje, że querySelectorjest obsługiwany jsfiddle.net/syNvz/show i QSA zbyt jsfiddle.net/syNvz/2/show
Fabrício Matté

1
Niezwykle pomocny dokument, zapisany w celach informacyjnych. Dzięki.
Andy,

1
@GKislin Ah! Widzę. Fajnie, że o tym nie wiedziałem. Ale po przeczytaniu tego , nie chcę teraz dodawać tej edycji do odpowiedzi. Może któregoś dnia później dodam ostrzeżenie, aby tego uniknąć. Jednym z wszystkich powodów ostrzeżeń byłoby to . Jeśli czujesz, że to naprawdę miłe, dokonaj edycji z ostrzeżeniem lub dodaj inną odpowiedź na życzenie :)
bugwheels94 26.04.17

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

Zobacz, jak działa w codepen.


Chociaż doceniam kompletność zaakceptowanej odpowiedzi, uznałem, że ta odpowiedź jest przydatna: dostęp do, w kodzie JS, wartości wprowadzonej w elemencie wprowadzania tekstu DOM (pole tekstowe). Szczegółowe informacje znajdują się w mojej odpowiedzi w innym miejscu tego pytania.
Victoria Stuart,

17

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

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

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

= "Your string" + input;


Jeśli chcesz, aby był to właściwy obiekt javascript, umożliwiający programowy dostęp do każdej właściwości, po prostu wykonaj: var input = JSON.parse (document.getElementById ("input_id"). Value);
JakeJ

15

Powinieneś być w stanie 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 do tworzenia, ulepszania i edytowania.


14

Możesz także wywoływać nazwy znaczników w następujący sposób: W ten form_name.input_name.value; sposób będziesz miał określoną wartość określonego wkładu w określonej formie.


Tak! Byłem zaskoczony tą prostotą. Spójrz na realizację prostego kalkulatora 4stud.info/web-programming/samples/dhtml-calculator.html Czy są jakieś odniesienia do tej funkcjonalności javascript, ponieważ ja zawsze przed użyciem jQuery lub getElementById
Grigory Kislin

5

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>

4

Testowane w Chrome i Firefox:

Uzyskaj wartość według identyfikatora elementu:

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

Zobacz także implementację kalkulatora JavaScript: http://www.4stud.info/web-programming/samples/dhtml-calculator.html

AKTUALIZACJA od @ bugwheels94: podczas korzystania z tej metody należy pamiętać o tym problemie .


3

Możesz użyć onkeyup, gdy masz więcej pól wejściowych. Załóżmy, że masz cztery lub dane wejściowe. To document.getElementById('something').valuejest denerwujące. musimy wpisać 4 wiersze, aby pobrać wartość pola wejściowego.

Możesz więc utworzyć funkcję, która przechowuje wartość w obiekcie w przypadku zdarzenia 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>

2

Można użyć form.elements, aby uzyskać wszystkie elementy w formularzu. Jeśli element ma identyfikator, 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


2

Jeśli jesteś inputw a formi chcesz uzyskać wartość po przesłaniu, możesz to zrobić

<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: Przykład: Twoja strona ma 2 form na dane wejściowe senderi receiverinformacje.

Jeśli nie użyjesz formdo uzyskania wartości, wówczas
- możesz ustawić 2 różne id(lub taglub name...) dla każdego pola, takie jak sender-namei receiver-name, sender-addressi receiver-address...
- Jeśli ustawisz tę samą wartość dla 2 danych wejściowych, to po getElementsByName(lub getElementsByTagName.. .) musisz pamiętać, że 0 lub 1 to senderlub receiver. Później, jeśli zmienisz kolejność 2 formw html, musisz ponownie sprawdzić ten kod

Jeśli używasz form, a następnie można użyć name, address...


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

1

proste js

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

-2

Możesz odczytać wartość według

searchTxt.value


-3

Jeśli używasz jQuery, a następnie używając formularza plugInteract, musisz 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

Wtyczki tej można używać do wielu celów, takich jak uzyskiwanie wartości formularza, wprowadzanie wartości do formularza, sprawdzanie poprawności formularzy i wiele innych. Możesz zobaczyć przykładowy kod w pliku index.html projektu.

Oczywiście jestem autorem tego projektu i wszyscy mogą go ulepszyć.


7
Prawdopodobnie powinieneś wspomnieć, że jest to Twoja osobista wtyczka.
Hanna

Fragmenty kodu zawierają literówkę. W drugiej części kodu brakuje podwójnego cudzysłowu.
Vincenzo
Korzystając z naszej strony potwierdzasz, że przeczytałeś(-aś) i rozumiesz nasze zasady używania plików cookie i zasady ochrony prywatności.
Licensed under cc by-sa 3.0 with attribution required.