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].value
któ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].value
któ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').value
któ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
- Aby zobaczyć wsparcie tych metod dla wszystkich błędów, w tym więcej szczegółów, kliknij tutaj
- Różnica między kolekcjami statycznymi a aktywnymi kliknij tutaj
- Różnica między NodeList a HTMLCollection kliknij tutaj
querySelector
jest obsługiwany jsfiddle.net/syNvz/show i QSA zbyt jsfiddle.net/syNvz/2/showZobacz, jak działa w codepen.
źródło
Utworzyłbym zmienną do przechowywania danych wejściowych w następujący sposób:
A potem użyłbym zmiennej, aby dodać wartość wejściową do łańcucha.
= "Your string" + input;
źródło
Powinieneś być w stanie wpisać:
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.
źródło
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.źródło
Spróbuj tego
źródło
Testowane w Chrome i Firefox:
Uzyskaj wartość według identyfikatora elementu:
Ustaw wartość w elemencie formularza:
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 .
źródło
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').value
jest 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:
javascript:
źródło
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:
Źródło: w3schools
źródło
Jeśli jesteś
input
w aform
i chcesz uzyskać wartość po przesłaniu, możesz to zrobićKorzyści z tego: Przykład: Twoja strona ma 2
form
na dane wejściowesender
ireceiver
informacje.Jeśli nie użyjesz
form
do uzyskania wartości, wówczas- możesz ustawić 2 różne
id
(lubtag
lubname
...) dla każdego pola, takie jaksender-name
ireceiver-name
,sender-address
ireceiver-address
...- Jeśli ustawisz tę samą wartość dla 2 danych wejściowych, to po
getElementsByName
(lubgetElementsByTagName
.. .) musisz pamiętać, że 0 lub 1 tosender
lubreceiver
. Później, jeśli zmienisz kolejność 2form
w html, musisz ponownie sprawdzić ten kodJeśli używasz
form
, a następnie można użyćname
,address
...źródło
źródło
proste js
źródło
Możesz odczytać wartość według
Pokaż fragment kodu
źródło
Jeśli używasz jQuery, a następnie używając formularza plugInteract, musisz to zrobić:
Na dole strony po prostu dołącz ten plik wtyczki i napisz ten kod:
Lub jeśli używasz sparametryzowanego adresu URL, użyj tego:
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ć.
źródło