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
  1. Enter your name:  
  2. <input type="text" id="name"> Enter your place:  
  3. <input type="text" id="place">  
  4.   
  5. <p>Name: <span id="fullname"></span></p>  
  6. <p>Place: <span id="placename"></span></p> 
Jquery
  1. $(document).ready(function() {  
  2.   $("#name").keypress(function() {  
  3.     // alert($("#name").val());  
  4.     document.getElementById('fullname').textContent = $("#name").val();  
  5.   });  
  6.   $("#place").on("keyup"function() {  
  7.     document.getElementById('placename').textContent = $("#place").val();  
  8.   });  
  9. }); 
Demo : https://jsfiddle.net/rajeeshmenoth/ceL8wrqh/
Ebook Download
View all
Learn
View all