jQuery keyup Method

We can use the jQuery keyup method to run a function when a user types something into an input field. To do this we can add a function call to the keyup() method.

$("input").keyup(function() {
  //This user has typed in the input field
});

Another way this can be done is to use the .on() method:

$('input').on("keyup", function() {
    //This user has typed in the input field
});

The jQuery keyup() method is very similar to the keydown() method, the main difference being that the keydown method will fire once a key is pressed, while the keyup method will only run once the key is pressed AND released.

An example using the jQuery keyup method

In this example, we will just have a simple input field with a div below it. When a user enters a key in the input field, we will display what key was pressed below. Here is the HTML setup:

<div id="div1">
  <p>Type any key below</p>
  <input type="text" id="textInput">
  <div id="result"></div>
</div>

We will use the jQuery keyup() method to run the function below. The function will retrieve the key that was pressed and display that below in the results div using the jQuery text() method.

Here is the JavaScript code:

$('#textInput').keyup(function(e){
  $('#result').text(e.code);
});

The final code and output for this example of using the keyup() method is below:

Code Output:

Full Code:

<div id="div1">
  <p>Type any key below</p>
  <input type="text" id="textInput">
  <div id="result"></div>
</div>

<script>

$('#textInput').keyup(function(e){
  $('#result').text(e.code);
});

</script>

Hopefully this article has been useful to help you understand how to use the jQuery keyup() method.