Jak uzyskać wartość pola wprowadzania tekstu za pomocą JavaScript?
Pracuję nad wyszukiwaniem z JavaScript. Użyłbym formularza, ale to psuje coś innego na mojej stronie. Mam to pole tekstowe:
<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 pobrać wartość z pola tekstowego do JavaScript?
15 answers
Istnieją różne metody, aby uzyskać wartość pola tekstowego bezpośrednio (bez zawijania elementu wejściowego wewnątrz elementu formularza):
Metoda 1:
document.getElementById('textbox_id').value
Aby uzyskać wartość pożądane pudełkoNa przykład,
document.getElementById("searchTxt").value;
Uwaga: metoda 2,3,4 i 6 zwraca kolekcję elementów, więc użyj [whole_number], aby uzyskać żądane wystąpienie. Dla pierwszego elementu użyj [0], dla drugiego użycie 1, i tak dalej...
Metoda 2:
Użycie
document.getElementsByClassName('class_name')[whole_number].value
który zwraca Live HTMLCollectionNa 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óre również zwraca live HTMLCollectionNa 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óre również > zwraca live NodeListNa przykład,
document.getElementsByName("searchTxt")[0].value;
jeśli jest to pierwsze pole tekstowe o nazwie "searchtext" na twojej stronie.
Metoda 5:
Użyj potężnego
document.querySelector('selector').value
, który używa selektora CSS do wyboru elementuNa przykład,
document.querySelector('#searchTxt').value;
wybrany przez iddocument.querySelector('.searchField').value;
wybrane przez klasędocument.querySelector('input').value;
wybrany przez tagnamedocument.querySelector('[name="searchTxt"]').value;
selected by name
Metoda 6:
document.querySelectorAll('selector')[whole_number].value
który również używa selektora CSS do zaznaczania elementów, ale zwraca wszystkie elementy z tym selektorem jako statyczną listą Nodelist.Na przykład,
document.querySelectorAll('#searchTxt')[0].value;
wybrany przez iddocument.querySelectorAll('.searchField')[0].value;
wybrane przez klasędocument.querySelectorAll('input')[0].value;
wybrany przez tagnamedocument.querySelectorAll('[name="searchTxt"]')[0].value;
selected by name
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
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2019-12-16 11:48:06
//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;
}
}
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2016-12-08 05:01:09
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;
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2015-06-04 07:12:10
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ć.
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2019-01-23 17:48:32
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.
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2014-06-23 18:31:38
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>
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2019-03-05 01:39:38
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 .
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2017-07-05 08:38:58
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
, ...
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2019-11-09 08:24:26
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
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2018-07-04 07:44:52
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>
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2018-12-11 05:12:52
<input id="new" >
<button onselect="myFunction()">it</button>
<script>
function myFunction() {
document.getElementById("new").value = "a";
}
</script>
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2018-03-07 18:18:02
Simple js
function copytext(text) {
var textField = document.createElement('textarea');
textField.innerText = text;
document.body.appendChild(textField);
textField.select();
document.execCommand('copy');
textField.remove();
}
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2019-01-17 13:18:41
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
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2020-06-27 20:23:39
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>
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2021-01-20 06:58:44
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ć.
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2017-05-27 22:15:12