Obtener el valor en un cuadro de texto de entrada


1005

¿Cuáles son las formas de obtener y representar un valor de entrada usando jQuery?

Acá hay uno:

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


1
use este código: var value = $ ('# txt_Name'). val (); También puede establecer el valor usando jquery. mira esta publicación en: coding-issues.blogspot.in/2013/10/…
Ranadheer Reddy

Respuestas:


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

//Set
$('#txt_name').val(bla);

35
@Prabs, la pregunta era: "¿Cuáles son las formas de obtener y representar un valor de entrada usando jQuery?", La etiqueta no es una entrada.
Barry Michael Doyle

3
eliminar las comillas de 'bla'. Debería ser $ ('# txt_name'). Val (bla);
Charles Xavier el

99
@ParbhuBissessar No necesariamente. Si quiere el texto literal 'bla', lo tiene bien. Si quiere el valdel var blaentonces necesita eliminar las comillas.
double_j

observe los get: "val ()" en lugar de "val" puede mirar mi perfil
TheRedstoneTaco

Hice esto pero tengo problemas.
Wasey Raza el

591

Solo puede seleccionar un valor de las dos formas siguientes:

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

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

Si desea utilizar JavaScript directo para obtener el valor, así es como:

document.getElementById('txt_name').value 

66
Sé que esta es una pregunta anterior, pero no olvide que attrtambién puede ser reemplazada por prop. Esto es semánticamente mejor.
Sablefoste

Solo $("#txt_name").val(str);funcionó para mí en Chrome para establecer el valor. Prueba esta publicación .
gkiko

La función de agregar jQuery parece no tener problemas para agregar al HTML mientras mantiene los valores del formulario.
Adam F

1
$ ("# txt_name"). attr ('valor'); El valor / respuesta predeterminado de devolución es incorrecto.
zloctb

1
tenga en cuenta que siempre $("#txt_name").attr('value')devolverá el contenido del atributo "valor", por lo que si cambia el campo de entrada, el valor no cambia. .val()siempre devolverá el contenido del campo ..
honk31

84

Hay una cosa importante que mencionar:

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

devolverá el valor real actual de un campo de texto, por ejemplo, si el usuario escribió algo allí después de cargar una página.

Pero:

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

devolverá el valor de DOM / HTML.


40

Puede obtener el valueatributo directamente ya que sabe que es un <input>elemento, pero su uso actual de .val()ya es el actual.

Para lo anterior, simplemente use .valueel elemento DOM directamente, así :

$(document).ready(function(){
  $("#txt_name").keyup(function(){
    alert(this.value);
  });
});

@Bharan ¿Por qué necesitas una alternativa?
Doug Molineux el

3
en algún lugar, me gustaría usar una alternativa,
Bharanikumar

16

Debe usar varias formas para obtener el valor actual de un elemento de entrada.

MÉTODO 1

Si desea utilizar un simple .val(), intente esto:

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

Obtener valores de entrada

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

Establecer valor en Entrada

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

MÉTODO - 2

Use .attr()para obtener el contenido.

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

Solo agrego un atributo al campo de entrada. value=""El atributo es el que lleva el contenido de texto que ingresamos en el campo de entrada.

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

MÉTODO - 3

puedes usar este directamente en tu inputelemento.

$("input").keyup(function(){
    alert(this.value);
});

15

Puede obtener el valor de esta manera:

this['inputname'].value

Donde se thisrefiere al formulario que contiene la entrada.


8
Esta respuesta supone que thisse refiere al formulario que contiene la entrada.
nandan

15

Creo que esta función se pierde aquí en respuestas anteriores:

.val( function(index, value) ) 

6

Para obtener el valor del cuadro de texto, puede usar la val()función jQuery .

Por ejemplo,

$('input:textbox').val() - Obtener el valor del cuadro de texto.

$('input:textbox').val("new text message") - Establecer el valor del cuadro de texto.


3

Para aquellos que, como yo, son novatos en JS y obtienen en undefinedlugar de valor de texto, asegúrese de que su idno contenga caracteres no válidos .


3

Simplemente puede establecer el valor en el cuadro de texto.

Primero, obtienes el valor como

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

Después de obtener un valor establecido en la entrada como

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

1

Prueba esto. Funcionará seguro.

var userInput = $('#txt_name').attr('value')

¡No, no lo hará! (1) Si no hay un atributo "valor" ( <input type="text" />), devuelve indefinido. (2) Si lo hace así <input type="text" value="test" />y el usuario escribe foo en el campo de entrada, el $('#txt_name').attr('value')todavía devuelve "prueba".
ndsvw

Esta respuesta no es correcta, pero esta es la API que estaba buscando.
Anthony
Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.