I want to return a string every time something is typed in the input field. In other words, with every keystroke, I want to see in the console it being typed out. So typing out stack in the input, I want to see:

s
st
sta
stac
stack

My initial code was:

$("#input").on('input', function() {
    var userInput = $(this).text();
    console.log(userInput);
  });

<script src=".0.0/jquery.min.js"></script>
<input type="text" id="input" placeholder="type">

I want to return a string every time something is typed in the input field. In other words, with every keystroke, I want to see in the console it being typed out. So typing out stack in the input, I want to see:

s
st
sta
stac
stack

My initial code was:

$("#input").on('input', function() {
    var userInput = $(this).text();
    console.log(userInput);
  });

<script src="https://ajax.googleapis./ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<input type="text" id="input" placeholder="type">

Which was returning blank. Ok, let's try toString():

$("#input").on('input', function() {
    var userInput = $(this).text();
    console.log(userInput.toString());
  });

<script src="https://ajax.googleapis./ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<input type="text" id="input" placeholder="type">

Same result. Why? Doesn't toString() convert a data type to string and shouldn't it be logged in console.

Why in the first example without toString() does it not return the text value?

http://api.jquery./text/ - it says

The result of the .text() method is a string containing the bined text of all matched elements.

What am I missing? What's going on here?

EDIT: silly mistake, I needed .val(); but that leads me to another question:

Howe the console was blank if .text() returns a string?

• javascript
• jquery
• html

• An input store the value in this.value or $(this).val(), not as text – Taplar Commented Feb 27, 2018 at 18:43
• <span>This is the kind of text</span> that jQuery.text() returns. The value of a input field is not stored in the html markup of that node. – Thomas Commented Feb 27, 2018 at 18:51
• "Howe the console was blank if .text() returns a string?" an empty string is also a string. And if the string doesn't contain any chars (or if the whole row contains only whitespace), what do you expect the console to show? – Thomas Commented Feb 27, 2018 at 18:54

4 Answers 4

Method to get the value of input is .val() and not .text(). See the application below:

$("#input").on('input', function() {
  var userInput = $(this).val();
  console.log(userInput);
});

<script src="https://ajax.googleapis./ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<input type="text" id="input" placeholder="type">

You essentially do not need .toString() as .val() give the string value only.

You're so close! .text() is for innerText type stuff. What you're looking for .val() this harvest the value from the input.

$("#input").on('input', function() {
    var userInput = $(this).val();
    console.log(userInput.toString());
  });

<script src="https://ajax.googleapis./ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<input type="text" id="input" placeholder="type">

Use the val() function instead.

Hope this is what you were looking for. Happy to explain or help in a better solution if needed.

$("#input").on('input', function() {
    var userInput = $(this).val();
    console.log( userInput);
  });

<script src="https://ajax.googleapis./ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<input type="text" id="input" placeholder="type">

If all you are trying to do is echo the value, the jQuery object is unnecessary. You can just use the this.value.

$("#input").on('input', function() {
    console.log(this.value);
  });

<script src="https://ajax.googleapis./ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<input type="text" id="input" placeholder="type">