Quiero devolver una cadena cada vez que se escribe algo en el campo de entrada. En otras palabras, con cada pulsación de tecla, quiero ver en la consola que se está escribiendo. Entonces, escribiendo stack en la entrada, quiero ver:

s
st
sta
stac
stack

Mi código inicial fue:

$("#input").on('input', function() {
    var userInput = $(this).text();
    console.log(userInput);
  });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<input type="text" id="input" placeholder="type">

Que volvía en blanco. Ok, intentemos toString():

$("#input").on('input', function() {
    var userInput = $(this).text();
    console.log(userInput.toString());
  });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<input type="text" id="input" placeholder="type">

Mismo resultado. ¿Por qué? No toString() convierte un tipo de datos a cadena y no debería estar registrado en la consola.

¿Por qué en el primer ejemplo sin toString() no devuelve el valor de texto?

http://api.jquery.com/text/ - dice

El resultado del método .text () es una cadena que contiene el texto combinado de todos los elementos coincidentes.

¿Qué me estoy perdiendo? ¿Que está pasando aqui?

EDITAR: error tonto, necesitaba .val(); pero eso me lleva a otra pregunta:

¿Cómo es que la consola estaba en blanco si .text() devuelve una cadena?

0
kawnah 27 feb. 2018 a las 21:40

4 respuestas

La mejor respuesta

El método para obtener el valor de entrada es .val() y no .text(). Vea la aplicación a continuación:

$("#input").on('input', function() {
  var userInput = $(this).val();
  console.log(userInput);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<input type="text" id="input" placeholder="type">

Básicamente, no necesita .toString() ya que .val() solo da el valor de la cadena.

7
void 27 feb. 2018 a las 18:43

Utilice la función val() en su lugar.

Espero que esto sea lo que estabas buscando. Feliz de explicar o ayudar en una mejor solución si es necesario.

$("#input").on('input', function() {
    var userInput = $(this).val();
    console.log( userInput);
  });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<input type="text" id="input" placeholder="type">
1
Gerardo BLANCO 27 feb. 2018 a las 18:43

¡Estás tan cerca! .text () es para cosas de tipo innerText. Lo que estás buscando .val() esta cosecha el valor de la entrada.

$("#input").on('input', function() {
    var userInput = $(this).val();
    console.log(userInput.toString());
  });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<input type="text" id="input" placeholder="type">
3
John Pavek 27 feb. 2018 a las 18:58

Si todo lo que intenta hacer es hacer eco del valor, el objeto jQuery es innecesario. Puedes usar el this.value.

$("#input").on('input', function() {
    console.log(this.value);
  });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<input type="text" id="input" placeholder="type">
0
Taplar 27 feb. 2018 a las 18:46