Получить значение в текстовом поле ввода

1005

Как можно получить и отобразить входное значение с помощью jQuery?

Вот один из них:

$(document).ready(function() {
  $("#txt_name").keyup(function() {
    alert($(this).val());
  });
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.4.3/jquery.min.js"></script>
<input type="text" id="txt_name" />

Bharanikumar
источник
1
используйте этот код: var value = $ ('# txt_Name'). val (); Вы также можете установить значение с помощью jquery. пожалуйста, посмотрите на это сообщение по адресу: coding-issues.blogspot.in/2013/10/…
Ranadheer Reddy,

Ответы:

1654
//Get
var bla = $('#txt_name').val();

//Set
$('#txt_name').val(bla);
Conrad
источник
35
@Prabs, вопрос был: «Как можно получить и отобразить входное значение, используя jQuery?», Метка не является входной.
Барри Майкл Дойл
3
удалить цитаты из «бла». Это должно быть $ ('# txt_name'). Val (bla);
Чарльз Ксавье
9
@ParbhuBissessar Не обязательно. Если он хочет буквальный текст «бла», значит, он правильно понял. Если он хочет valиз var blaто он должен удалить кавычки.
double_j
обратите внимание на get: «val ()» вместо «val» вы можете посмотреть в моем профиле
TheRedstoneTaco
Я сделал это, но возникли проблемы.
Wasey Raza
591

Вы можете выбрать значение только двумя следующими способами:

// First way to get a value
value = $("#txt_name").val(); 

// Second way to get a value
value = $("#txt_name").attr('value');

Если вы хотите использовать прямой JavaScript для получения значения, вот как:

document.getElementById('txt_name').value 
RJD22
источник
6
Я знаю, что это более старый вопрос, но не забывайте, что его attrтакже можно заменить на prop. Это семантически лучше.
Саблефост
У $("#txt_name").val(str);меня работал только в Chrome, чтобы установить значение. Попробуйте этот пост .
gkiko
Кажется, что у функции добавления jQuery нет проблем с добавлением в HTML при сохранении значений формы.
Адам Ф
1
$ ( "# txt_name") атр ( 'значение'). вернуть значение по умолчанию / ответ неверный!
zloctb 12.12.13
1
$("#txt_name").attr('value')Имейте в виду, что всегда будет возвращать содержимое атрибута «значение», поэтому, если вы измените поле ввода, значение не изменится. .val()всегда будет возвращать содержимое поля ..
honk31
84

Следует упомянуть одну важную вещь:

$("#txt_name").val();

вернет текущее реальное значение текстового поля, например, если пользователь напечатал что-то там после загрузки страницы.

Но:

$("#txt_name").attr('value')

вернет значение из DOM / HTML.

Artur79
источник
40

Вы можете получить valueатрибут напрямую, поскольку знаете, что он является <input>элементом, но текущее использование .val()уже является текущим.

Для вышеперечисленного просто используйте .valueэлемент DOM напрямую, например так :

$(document).ready(function(){
  $("#txt_name").keyup(function(){
    alert(this.value);
  });
});
Ник Крейвер
источник
@Bharan Зачем вам нужна альтернатива?
Дуг Молинью
3
в каком-то месте я бы хотел использовать альтернативу,
Bharanikumar
16

Вы должны использовать различные способы, чтобы получить текущее значение элемента ввода.

МЕТОД - 1

Если вы хотите использовать простое .val(), попробуйте это:

<input type="text" id="txt_name" />

Получить значения из ввода

// use to select with DOM element.
$("input").val();

// use the id to select the element.
$("#txt_name").val();

// use type="text" with input to select the element
$("input:text").val();

Установите значение для ввода

// use to add "text content" to the DOM element.
$("input").val("text content");

// use the id to add "text content" to the element.
$("#txt_name").val("text content");

// use type="text" with input to add "text content" to the element
$("input:text").val("text content");

МЕТОД - 2

Используйте .attr()для получения контента.

<input type="text" id="txt_name" value="" />

Я просто добавляю один атрибут в поле ввода. value=""Атрибут - это тот, кто несет текстовое содержимое, которое мы ввели в поле ввода.

$("input").attr("value");

МЕТОД - 3

Вы можете использовать это непосредственно на вашем inputэлементе.

$("input").keyup(function(){
    alert(this.value);
});
Simplans
источник
15

Вы можете получить значение следующим образом:

this['inputname'].value

Где thisотносится к форме, которая содержит ввод.

ТАК полно обезьян
источник
8
Этот ответ предполагает, что thisэто относится к форме, содержащей входные данные.
Нандан
15

Я думаю, что эта функция отсутствует здесь в предыдущих ответах:

.val( function(index, value) ) 
Dilip Kumbham
источник
6

Чтобы получить значение текстового поля, вы можете использовать val()функцию jQuery .

Например,

$('input:textbox').val() - Получить значение текстового поля.

$('input:textbox').val("new text message") - Установите значение текстового поля.

Юваль
источник
3

Для тех, кто так же, как я, новички в JS и undefinedвместо текстового значения убедитесь, что ваш idне содержит недопустимых символов .

Михаил Сиротенко
источник
3

Вы можете просто установить значение в текстовом поле.

Во-первых, вы получаете значение как

var getValue = $('#txt_name').val();

После получения значения, установленного на входе, как

$('#txt_name').val(getValue);
Muddasir23
источник
1

Попробуй это. Это будет работать наверняка.

var userInput = $('#txt_name').attr('value')
H.Ostwal
источник
Нет не будет !! (1) Если нет атрибута «value» ( <input type="text" />), он возвращает неопределенное значение. (2) Если вы сделаете это так, <input type="text" value="test" />и пользователь $('#txt_name').attr('value')
введет
Этот ответ не правильный, но это API, который я искал.
Энтони