Как получить значение поля ввода текста с помощью JavaScript?


874

Я работаю над поиском с помощью 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?

Ответы:


1770

Существуют различные методы для непосредственного получения входного значения текстового поля (без обертывания входного элемента внутри элемента формы):

Способ 1:

document.getElementById('textbox_id').value чтобы получить значение желаемой коробки

Например, document.getElementById("searchTxt").value;

 

Примечание. Метод 2,3,4 и 6 возвращает коллекцию элементов, поэтому используйте [whole_number], чтобы получить желаемое вхождение. Для первого элемента используйте [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 для выбора элементов, но возвращает все элементы с этим селектором в виде статического списка узлов.

Например, 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 Are Ther любой ссылка на этот яваскрипте functiality, потому что я , прежде чем я всегда использую 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 строки, чтобы получить значение поля ввода.

Таким образом, вы можете создать функцию, которая хранит значение в объекте по событию keyup или keydown.

Пример :

<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, чтобы получить все элементы в форме. Если элемент имеет идентификатор, его можно найти с помощью. 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в, 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.