HowToDoInJava

  • Python
  • Java
  • Spring Boot
  • Dark Mode
Home / jQuery / jQuery – Difference between Keypress and Keydown Events

jQuery – Difference between Keypress and Keydown Events

jQuery supports 3 types of keyboard events and which we are :

  1. keyup(): Event fired when a key is released on the keyboard.
  2. keydown(): Event fired when a key is pressed on the keyboard.
  3. keypress:() Event fired when a key is pressed on the keyboard.

From above definitions, it looks like that keydown() and keypress() are same thing. But, actually they are not exactly same.

Let’s see how they are different.

1) Special keys (e.g. CTRL or ALT or SHIFT)

In case if you press any special key, browser will fire only keydown() event but not keypress() event.

Try Yourself

Try pressing some normal keys and then some special keys.

<html>
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script type="text/javascript">
var keydownCounter = 0;
var keypressCounter = 0;
$( document ).ready(function(){

	$('#textbox').keydown(function(event){
		$('#keydownCounter').html(++keydownCounter);
	});
	 
	$('#textbox').keypress(function(event){
		$('#keypressCounter').html(++keypressCounter);
	});

});
</script>
</head>
<body>
	<h4>jQuery keydown() and keypress() difference</h4>
	
	<label>TextBox : </label><input id="textbox" type="text" size="50" />
	
	<div>
		<label>keydown() event fired : </label><span id="keydownCounter">0</span> times.
	</div>
	
	<div>
		<label>keypress() event fired : </label><span id="keypressCounter">0</span> times.
	</div>
</body>
</html>

2) Capturing keycode or key ascii value

If you hit the letter a, and A (capital letter), you will find the below behavior of events.

  1. keydown() will display a = 65, A = 65 (case insensitive).
  2. keypresss() will display a= 97, A=65 (case sensitive).

If you want to capture the real character key in, always use keypress() event.

Try Yourself

Try pressing some keys with [Caps Lock] ON and then after turning it OFF.

<html>
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script type="text/javascript">
$( document ).ready(function(){

	$('#textbox').keydown(function(event){
		var keycode = (event.keyCode ? event.keyCode : event.which);
		$('#keydownCode').html(keycode);
	});
	 
	$('#textbox').keypress(function(event){
		var keycode = (event.keyCode ? event.keyCode : event.which);
		$('#keypressCode').html(keycode);
	});

});
</script>
</head>
<body>
	<h4>jQuery keydown() and keypress() difference</h4>
	
	<label>TextBox : </label><input id="textbox" type="text" size="50" />
	
	<div>
		<label>keydown() detected keycode : </label><span id="keydownCode">0</span>.
	</div>
	
	<div>
		<label>keypress() detected keycode : </label><span id="keypressCode">0</span>.
	</div>
</body>
</html>
The event.keyCode is not working in FireFox , but work perfect in IE. To get the event.keyCode in Firefox, you should use the event.which instead, and jQuery recommend it as well. So the better way should be

var keycode = (event.keyCode ? event.keyCode : event.which);

3) When any key is long pressed

In this case, according to docs, keydown() event is triggered once, but the keypress() event will keep triggering until the key is released. Anyway, this is browser specific behavior and I will not suggest you on this feature. This should be limited to your knowledge only.

Try Yourself

Press any key and keep it down.

<html>
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script type="text/javascript">
var keydownCounter = 0;
var keypressCounter = 0;
$( document ).ready(function(){

	$('#textbox').keydown(function(event){
		$('#keydownCounter').html(++keydownCounter);
	});
	 
	$('#textbox').keypress(function(event){
		$('#keypressCounter').html(++keypressCounter);
	});

});
</script>
</head>
<body>
	<h4>jQuery keydown() and keypress() difference</h4>
	
	<label>TextBox : </label><input id="textbox" type="text" size="50" />
	
	<div>
		<label>keydown() event fired : </label><span id="keydownCounter">0</span> times.
	</div>
	
	<div>
		<label>keypress() event fired : </label><span id="keypressCounter">0</span> times.
	</div>
</body>
</html>
If above demo is not working in your browser then do not worry. You are not alone. Please refer section 2.2 (Events Triggered on Auto-Repeat) from http://unixpapa.com/js/key.html.

Let me know if you have any doubt or suggestion.

Happy Learning !!

Share this:

  • Twitter
  • Facebook
  • LinkedIn
  • Reddit

About Lokesh Gupta

A family guy with fun loving nature. Love computers, programming and solving everyday problems. Find me on Facebook and Twitter.

Feedback, Discussion and Comments

  1. sachin

    May 4, 2016

    great job

  2. Ryan Hinton

    May 14, 2014

    I’m using Firefox 29.0.1 and when holding down the Enter key, keypress and keydown both continually fire with identical counts.

    • Ryan Hinton

      May 14, 2014

      However, when pressing on keys other than the Enter key, keydown continually fires and keypress is counted once only.

      • Lokesh Gupta

        May 14, 2014

        Strange. I will also check it.

  3. Jamen

    March 29, 2014

    On #3, it’s the opposite for me, I’m on Mac OS and the “keydown” even keeps going, not the “keypress”. Also you have 1 or 2 grammar errors, not a big deal.

    • Lokesh Gupta

      March 29, 2014

      thanks for your comment.

  4. sri

    February 25, 2014

    How To Do the Radio Button Validation in SAPUI5 ?
    Here I created A sample Form…Tell me the Validations of radio Button?

    Insert title here

    var oLayout1 = new sap.ui.layout.form.ResponsiveGridLayout(“L1”);

    var oForm1 = new sap.ui.layout.form.Form(“F1”,{
    title: new sap.ui.core.Title({text: “Ticket Information”}),
    layout: oLayout1,
    formContainers: [
    new sap.ui.layout.form.FormContainer(“F1C1”,{
    // title: “Person data”,
    formElements: [
    new sap.ui.layout.form.FormElement({
    label: “TicketNumber”,
    fields: [new sap.ui.commons.TextField({value: “200008216”}),

    ]
    }),
    new sap.ui.layout.form.FormElement({
    label: “Subject”,
    fields: [new sap.ui.commons.TextField({value: “(10796)Orders Being Rejected With System Error”})
    ]
    }),
    new sap.ui.layout.form.FormElement({
    label: “Sybase 365 Campaign “,
    fields: [new sap.ui.commons.TextField({value: “Unisys AUS Push Account”}),

    ]
    }),
    new sap.ui.layout.form.FormElement({
    label: “Sybase 365 Campaign Status”,
    fields: [new sap.ui.commons.TextField({value: “Active”}),

    ]
    }),
    new sap.ui.layout.form.FormElement({
    label: “Contact Name “,
    fields: [new sap.ui.commons.TextField({value: “Mr. Robert Simmons”}),

    ]
    }),
    new sap.ui.layout.form.FormElement({
    label: “Account Name”,
    fields: [new sap.ui.commons.TextField({value: “Unisys Australia Pty Limited”}),

    ]
    }),
    new sap.ui.layout.form.FormElement({
    label: “Account Service Status”,
    fields: [new sap.ui.commons.TextField({value: “Unknown”}),

    ]
    }),
    new sap.ui.layout.form.FormElement({
    label: “Account Customer Status”,
    fields: [new sap.ui.commons.TextField({value: “Live”}),

    ]
    }),
    new sap.ui.layout.form.FormElement({
    label: “CustomerSatisfaction”,

    fields: [new sap.ui.commons.RadioButtonGroup({
    columns: 2,
    id :”msg”,
    name:”cust_option”,
    items: [new sap.ui.core.Item({text: “Yes”}),
    new sap.ui.core.Item({text: “No”})],
    })]
    }),
    new sap.ui.layout.form.FormElement({
    label: “Portal Information”,
    // fields: [new sap.ui.commons.TextField({value: “Live”}),

    })
    ]
    }),

    new sap.ui.layout.form.FormContainer(“F1C2”,{
    //title: “address”,
    formElements: [
    new sap.ui.layout.form.FormElement({
    label: “Status”,
    fields: [new sap.ui.commons.DropdownBox({
    items: [new sap.ui.core.ListItem({text: “Closed”})],

    })]

    }),
    new sap.ui.layout.form.FormElement({
    label: “Severity”,
    fields: [new sap.ui.commons.DropdownBox({
    items:[new sap.ui.core.ListItem({text: “2”})],

    })]
    }),
    new sap.ui.layout.form.FormElement({
    label: “Priority”,
    fields: [new sap.ui.commons.DropdownBox({
    items: [new sap.ui.core.ListItem({text: “TBD”})],

    })]
    }),

    new sap.ui.layout.form.FormElement({
    label: “Reason for Closed”,
    fields: [new sap.ui.commons.DropdownBox({
    items: [new sap.ui.core.ListItem({text: “Fixed”})],

    })]
    }),
    new sap.ui.layout.form.FormElement({
    label: “Ticket Category”,
    fields: [new sap.ui.commons.DropdownBox({
    items: [new sap.ui.core.ListItem({text: “AM Network”})],

    })]
    }),
    new sap.ui.layout.form.FormElement({
    label: “Ticket Subcatagory”,
    fields: [new sap.ui.commons.DropdownBox({
    items: [new sap.ui.core.ListItem({text:”Missing MT”})],

    })]
    }),

    new sap.ui.layout.form.FormElement({
    label: “Product Catagory”,
    fields: [new sap.ui.commons.DropdownBox({
    items: [new sap.ui.core.ListItem({text: “SMS”})],

    })]
    }),
    new sap.ui.layout.form.FormElement({
    label: “Product SubCatagory”,
    fields: [new sap.ui.commons.DropdownBox({
    items: [new sap.ui.core.ListItem({text: “AM SMS”})],

    })]
    }),
    new sap.ui.layout.form.FormElement({
    label: “Salesforce Ticket Number”,
    fields: [new sap.ui.commons.TextField({value: “00158253”}),

    ]
    })
    ]
    }),
    new sap.ui.layout.form.FormContainer(“C11”,{
    formElements: [
    new sap.ui.layout.form.FormElement({
    label: “”
    }),
    new sap.ui.layout.form.FormElement({
    fields: [new sap.ui.commons.Button({text: “Edit”,
    width:”100%”,
    //press : function() {alert(‘Alert from ‘ + oButton1.getText());}
    layoutData: new sap.ui.layout.form.GridElementData({hCells: “1”})
    // press : function() {alert(‘Alert from ‘ + oButton1.getText());}
    })]

    })

    ]
    })
    ]
    });

    oForm1.placeAt(“sample1”);

    this is my form..

    • Lokesh Gupta

      February 25, 2014

      Absolutely no idea of SAP UI.

  5. John

    December 26, 2013

    Good information.

Comments are closed on this article!

Search Tutorials

JavaScript / jQuery Tutorials

  • Ajax Tutorial
  • jQuery – Ajax
  • jQuery – Deep Cloning
  • jQuery – Selectors
  • jQuery – All Selector
  • jQuery – Cut, Copy or Paste Events
  • jQuery – ENTER Key Press Event
  • jQuery – Keypress vs. Keydown
  • jQuery – Funny Discussion on SO
  • JavaScript – Array filter()
  • JavaScript – Equality vs Identity
  • JavaScript – Variable Scope Rules
  • JavaScript – Global Variables
  • JavaScript – MVC and PubSub
  • JavaScript – DOM vs. jQuery Objects
  • JavaScript – Unit Test with Jasmine
  • JavaScript – Information Masking

Meta Links

  • About Me
  • Contact Us
  • Privacy policy
  • Advertise
  • Guest and Sponsored Posts

Recommended Reading

  • 10 Life Lessons
  • Secure Hash Algorithms
  • How Web Servers work?
  • How Java I/O Works Internally?
  • Best Way to Learn Java
  • Java Best Practices Guide
  • Microservices Tutorial
  • REST API Tutorial
  • How to Start New Blog

Copyright © 2020 · HowToDoInjava.com · All Rights Reserved. | Sitemap

  • Java 15 New Features
  • Sealed Classes and Interfaces
  • EdDSA (Ed25519 / Ed448)