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.