Difference Between Keypress & Keyup, In jQuery

Introduction

 

This blog describes the difference between Keypress and Keyup, in jQuery.

 

Keypress

• For each Keypress, we will get the previous value. The first value of Keypress is null.
  

Keyup

• For each Keyup, we will get the current value. 

Code

 

Html

Enter your name:
<input type="text" id="name"> Enter your place:
<input type="text" id="place">

<p>Name: <span id="fullname"></span></p>
<p>Place: <span id="placename"></span></p>

Jquery

$(document).ready(function() {
  $("#name").keypress(function() {
    // alert($("#name").val());
    document.getElementById('fullname').textContent = $("#name").val();
  });
  $("#place").on("keyup", function() {
    document.getElementById('placename').textContent = $("#place").val();
  });
});

Demo : https://jsfiddle.net/rajeeshmenoth/ceL8wrqh/