Uzyskaj wartość w wejściowym polu tekstowym

1004

Jakie są sposoby uzyskania i renderowania wartości wejściowej przy użyciu jQuery?

Tutaj jest jeden:

$(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
źródło
1
użyj tego kodu: var value = $ ('# txt_Name'). val (); Możesz także ustawić wartość za pomocą jquery. proszę spojrzeć na ten post pod adresem: coding-issues.blogspot.in/2013/10/…
Ranadheer Reddy

Odpowiedzi:

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

//Set
$('#txt_name').val(bla);
Conrad
źródło
35
@Prabs, pytanie brzmiało: „Jakie są sposoby uzyskania i renderowania wartości wejściowej przy użyciu jQuery?”, Etykieta nie jest danymi wejściowymi.
Barry Michael Doyle
3
usuń cytaty z „bla”. Powinien to być $ ('# txt_name'). Val (bla);
Charles Xavier,
9
@ParbhuBissessar Niekoniecznie. Jeśli chce literalnego tekstu „bla”, to ma rację. Jeśli on chce valz var blapotem musi usunąć cudzysłów.
double_j
zauważ get: „val ()” zamiast „val” możesz spojrzeć na mój profil
TheRedstoneTaco
Zrobiłem to, ale miałem problemy.
Wasey Raza,
591

Możesz wybrać wartość tylko na dwa następujące sposoby:

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

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

Jeśli chcesz użyć prostego JavaScript, aby uzyskać wartość, oto jak:

document.getElementById('txt_name').value 
RJD22
źródło
6
Wiem, że to starsze pytanie, ale nie zapominaj, że attrmożna je również zastąpić prop. To jest semantycznie lepsze.
Sablefoste
$("#txt_name").val(str);Pracowałem tylko w Chrome, aby ustawić wartość. Wypróbuj ten post .
gkiko
Wydaje się, że funkcja dodawania jQuery nie ma problemu z dodaniem do HTML przy zachowaniu wartości formularza.
Adam F.
1
$ („# txt_name”). attr („wartość”); zwracana wartość domyślna / odpowiedź jest niepoprawna!
zloctb
1
pamiętaj, że $("#txt_name").attr('value')zawsze zwróci zawartość atrybutu „wartość”, więc jeśli zmienisz pole wprowadzania, wartość się nie zmieni. .val()zawsze zwróci zawartość pola.
honk31
84

Należy wspomnieć o jednej ważnej rzeczy:

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

zwróci bieżącą rzeczywistą wartość pola tekstowego, na przykład jeśli użytkownik wpisze tam coś po załadowaniu strony.

Ale:

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

zwróci wartość z DOM / HTML.

Artur79
źródło
40

Możesz uzyskać ten valueatrybut bezpośrednio, ponieważ wiesz, że jest to <input>element, ale twoje obecne użycie .val()jest już aktualne.

W powyższym przypadku wystarczy użyć .valuebezpośrednio elementu DOM, jak poniżej :

$(document).ready(function(){
  $("#txt_name").keyup(function(){
    alert(this.value);
  });
});
Nick Craver
źródło
@ Bharan Dlaczego potrzebujesz alternatywy?
Doug Molineux,
3
w pewnym miejscu chciałbym skorzystać z alternatywy,
Bharanikumar
16

Musisz użyć różnych sposobów, aby uzyskać bieżącą wartość elementu wejściowego.

METODA - 1

Jeśli chcesz użyć prostego .val(), spróbuj tego:

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

Uzyskaj wartości z wejścia

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

Ustaw wartość na Input

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

METODA - 2

Użyj, .attr()aby uzyskać treść.

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

Dodałem tylko jeden atrybut do pola wejściowego. value=""atrybut to ten, który przenosi treść tekstową, którą wprowadziliśmy w polu wejściowym.

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

METODA - 3

możesz użyć tego bezpośrednio na swoim inputelemencie.

$("input").keyup(function(){
    alert(this.value);
});
Simplans
źródło
15

Możesz uzyskać taką wartość:

this['inputname'].value

Gdzie thisodnosi się do formularza zawierającego dane wejściowe.

SO jest pełne małp
źródło
8
Ta odpowiedź zakłada, że thisodnosi się do formularza zawierającego dane wejściowe.
nandan
15

Myślę, że tej funkcji brakowało tutaj w poprzednich odpowiedziach:

.val( function(index, value) ) 
dilip Kumbham
źródło
6

Aby uzyskać wartość pola tekstowego, możesz użyć val()funkcji jQuery .

Na przykład,

$('input:textbox').val() - Uzyskaj wartość pola tekstowego.

$('input:textbox').val("new text message") - Ustaw wartość pola tekstowego.

Yuval
źródło
3

Dla tych, którzy tak jak ja, są nowicjuszami w JS, a undefinedzamiast wartości tekstowej upewnij się, że idnie zawiera niepoprawnych znaków .

Michaił Sirotenko
źródło
3

Możesz po prostu ustawić wartość w polu tekstowym.

Po pierwsze, dostajesz wartość jak

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

Po uzyskaniu wartości ustawionej na wejściu jak

$('#txt_name').val(getValue);
Muddasir23
źródło
1

Spróbuj tego. Na pewno zadziała.

var userInput = $('#txt_name').attr('value')
H.Ostwal
źródło
Nie, nie będzie !! (1) Jeśli nie ma atrybutu „wartość” ( <input type="text" />), zwraca niezdefiniowane. (2) Jeśli zrobisz to w ten sposób, <input type="text" value="test" />a użytkownik wpisze foo w polu wejściowym, $('#txt_name').attr('value')nadal zwraca „test.
ndsvw,
Ta odpowiedź jest nieprawidłowa, ale szukałem API.
Anthony