Як отримати значення поля введення тексту за допомогою JavaScript?


873

Я працюю над пошуком за допомогою JavaScript. Я б використав форму, але вона заплутала щось інше на своїй сторінці. У мене є це вхідне текстове поле:

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

І це мій JavaScript-код:

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

Як отримати значення з текстового поля в JavaScript?

Відповіді:


1768

Існують різні методи для отримання значення вхідного текстового поля безпосередньо (без загортання вхідного елемента всередині елемента форми):

Спосіб 1:

document.getElementById('textbox_id').value щоб отримати значення потрібного поля

Наприклад, document.getElementById("searchTxt").value;

 

Примітка. Метод 2,3,4 та 6 повертає колекцію елементів, тому використовуйте [весь_число], щоб отримати бажане явище. Для першого елемента використовуйте [0], для другого - 1 і так далі ...

Спосіб 2:

Використовуйте, document.getElementsByClassName('class_name')[whole_number].valueщо повертає Live HTMLCollection

Наприклад, document.getElementsByClassName("searchField")[0].value; якщо це перше текстове поле на вашій сторінці.

Спосіб 3:

Використовуйте, document.getElementsByTagName('tag_name')[whole_number].valueщо також повертає живий HTMLCollection

Наприклад, document.getElementsByTagName("input")[0].value; якщо це перше текстове поле на вашій сторінці.

Спосіб 4:

document.getElementsByName('name')[whole_number].value який також> повертає живий NodeList

Наприклад, document.getElementsByName("searchTxt")[0].value; якщо це перше текстове поле з назвою "searchtext" на вашій сторінці.

Спосіб 5:

Використовуйте потужний, document.querySelector('selector').valueякий використовує селектор CSS для вибору елемента

Наприклад, document.querySelector('#searchTxt').value; вибраний ідентифікатор,
document.querySelector('.searchField').value;обраний класом
document.querySelector('input').value;,
document.querySelector('[name="searchTxt"]').value;вибраним іменем тегів, вибраним іменем

Спосіб 6:

document.querySelectorAll('selector')[whole_number].value який також використовує селектор CSS для вибору елементів, але повертає всі елементи з цим селектором як статичний Nodelist.

Наприклад, document.querySelectorAll('#searchTxt')[0].value; вибраний ідентифікатор,
document.querySelectorAll('.searchField')[0].value;обраний класом
document.querySelectorAll('input')[0].value; ,
document.querySelectorAll('[name="searchTxt"]')[0].value;вибраним іменем тегів, вибраним іменем

Підтримка

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

Корисні посилання

  1. Щоб побачити підтримку цих методів з усіма помилками, включаючи більше деталей, натисніть тут
  2. Різниця між статичними колекціями та живими колекціями натисніть тут
  3. Різниця між NodeList та HTMLCollection натисніть тут

Наскільки я бачу, IE8 підтримує QSA , він просто не підтримує селектори CSS3 у рядку селектора.
Фабріціо Матте

@ FabrícioMatté я щойно перевірив тут quirksmode.org/dom/tests/basics.html#querySelectorAll, і він сказав мені, що це не так
bugwheels94

Цікаво. Простий тест IE8 для Win7 показує, що querySelectorпідтримується jsfiddle.net/syNvz/show та QSA також jsfiddle.net/syNvz/2/show
Фабріціо Матте

1
Надзвичайно корисний документ, збережений для довідок. Дякую.
Енді

1
@GKislin Ах! Розумію. Приємно, що я про це не знав. Але прочитавши це , я не хочу додавати цю редакцію у відповідь прямо зараз. Можливо, колись пізніше я додам це з попередженням, щоб цього уникати. Однією з усіх причин попередження було б це . Якщо вам здається, що це дійсно приємно, то або зробіть редагування з попередженням або додайте іншу відповідь за своїм бажанням :)
bugwheels94

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

Дивіться це функціонування в codepen.


Хоча я ціную повноту прийнятої відповіді, я вважав, що ця відповідь є корисною для отримання доступу до JS-коду до значення, введеного в елемент введення тексту DOM (текстове поле). Детальніше дивіться мою відповідь в іншому місці цього питання.
Вікторія Стюарт

17

Я б створив змінну для зберігання такого входу:

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

І тоді я б просто використовувати змінну, щоб додати значення введення до рядка.

= "Your string" + input;


Якщо ви хочете, щоб він був належним об’єктом javascript, щоб ви могли програмно отримати доступ до кожного ресурсу, просто зробіть: var input = JSON.parse (document.getElementById ("input_id"). Value);
JakeJ

15

Ви повинні мати можливість вводити:

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

Я впевнений, що є кращі способи зробити це, але, здається, цей працює в усіх браузерах, і для створення, вдосконалення та редагування потрібне мінімальне розуміння JavaScript.


14

Також ви можете зателефонувати за іменами тегів, як це: form_name.input_name.value; Отже, ви будете мати конкретне значення визначеного введення в певній формі.


Так! Мене здивувала ця простота. Подивіться на реалізацію простого калькулятора 4stud.info/web-programming/samples/dhtml-calculator.html Чи є якісь посилання на цю функціональність javascript, тому що я перед тим, як завжди використовувати jQuery або getElementById
Григорій Кіслін

5

Спробуйте це

<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

Тестовано в Chrome та Firefox:

Отримайте значення за ідентифікатором елемента:

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

Встановити значення в елементі форми:

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

Перегляньте також реалізацію калькулятора JavaScript: http://www.4stud.info/web-programming/samples/dhtml-calculator.html

ОНОВЛЕННЯ від @ bugwheels94: використовуючи цей метод, будьте в курсі цього питання .


3

Ви можете використовувати onkeyup, коли у вас є більше поля для введення. Припустимо, у вас є чотири або input.then document.getElementById('something').value дратує. нам потрібно написати 4 рядки, щоб отримати значення поля введення.

Отже, ви можете створити функцію, яка зберігає значення в об'єкті при події клавіатури або клавіші.

Приклад:

<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

Можна використовувати form.elements, щоб отримати всі елементи у формі. Якщо елемент має id, його можна знайти за допомогою .namedItem ("id"). Приклад:

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

Джерело: w3schools


2

Якщо ви inputзнаходитесь в a, formі ви хочете отримати цінність після надсилання, ви можете зробити так, як

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

Перевага цього способу: На прикладі вашої сторінки є 2 form для введення інформації senderта receiverінформації.

Якщо ви не використовуєте formдля отримання значення значення
- Ви можете встановити 2 різні id(або tagабо name...) для кожного поля, наприклад, sender-nameі receiver-name, sender-addressі receiver-address, ...
- Якщо ви встановите однакове значення для 2 введення, то після getElementsByName(або getElementsByTagName.. .) потрібно запам'ятати 0 або 1 є senderабо receiver. Пізніше, якщо ви зміните порядок 2 formу html, вам потрібно ще раз перевірити цей код

Якщо ви використовуєте form, то ви можете використовувати name, address...




-2

Ви можете прочитати значення за допомогою

searchTxt.value


-3

Якщо ви використовуєте jQuery, використовуючи плагін formInteract, вам просто потрібно зробити це:

// Just keep the HTML as it is.

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

Внизу сторінки просто включіть цей плагін і напишіть цей код:

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

Або якщо ви використовуєте параметризовану URL-адресу, скористайтеся цією:

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

Ось посилання на проект https://bitbucket.org/ranjeet1985/forminteract

Ви можете використовувати цей плагін для багатьох цілей, таких як отримання значення форми, введення значень у форму, перевірка форм та багато іншого. Ви можете побачити приклад коду у файлі index.html проекту.

Звичайно, я автор цього проекту, і всі ми раді зробити його кращим.


7
Напевно, ви повинні згадати, що це ваш власний плагін.
Ганна

Існує друкарська помилка в фрагментах коду. У другій частині коду відсутня подвійна цитата.
Вінченцо
Використовуючи наш веб-сайт, ви визнаєте, що прочитали та зрозуміли наші Політику щодо файлів cookie та Політику конфіденційності.
Licensed under cc by-sa 3.0 with attribution required.