HowToDoInJava

  • Java 8
  • Regex
  • Concurrency
  • Best Practices
  • Spring Boot
  • JUnit5
  • Interview Questions
  • Dark Mode

jQuery detect ENTER key press event

By Lokesh Gupta | Filed Under: jQuery

Learn to detect ENTER key example in jQuery. This is common sense that if you have to detect a key pressed in browser then you must check in keycode (ascii) value. Simple and easy. The problem arises when you don’t know how to correctly use this functionality. e.g. whether you need to bind keypress or keydown? What is ascii value of ENTER key?

1. jQuery detect ENTER key

Note that the “ENTER” key is represented by ascii code “13”. Check this ASCII charts.

To check whether user pressed ENTER key on webpage or on any input element, you can bind keypress or keydown event to that element or document object itself. Then in bind() function check the keycode of pressed key whether it’s value is 13 is not.

If ascii code of key pressed is 13 then “ENTER” key was pressed; otherwise some other key was pressed.

Read More: Difference between keypress and keydown events

2. jQuery detect ENTER key pressed on text box

$('#someTextBox').keypress(function(event){
	var keycode = (event.keyCode ? event.keyCode : event.which);
	if(keycode == '13'){
		alert('You pressed a "enter" key in textbox');	
	}
});

3. jQuery detect ENTER key pressed on document object

$(document).keypress(function(event){
	var keycode = (event.keyCode ? event.keyCode : event.which);
	if(keycode == '13'){
		alert('You pressed a "enter" key in somewhere');	
	}
});
In Firefox, you have to use event.which to get the keycode; while IE support both event.keyCode and event.which.

4. jQuery detect ENTER key – Try yourself

<html>
	<head>
		<script type="text/javascript" src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
	</head>
	<body>
		<h1>Detect ENTER key with jQuery</h1>
		<label>TextBox Area: </label>
		<input id="someTextBox" type="text" size="40" />
		<script type="text/javascript">
			//Bind keypress event to textbox
			$('#someTextBox').keypress(function(event){
				var keycode = (event.keyCode ? event.keyCode : event.which);
				if(keycode == '13'){
					alert('You pressed a "enter" key in textbox');	
				}
				//Stop the event from propogation to other handlers
				//If this line will be removed, then keypress event handler attached 
				//at document level will also be triggered
				event.stopPropagation();
			});
			
			//Bind keypress event to document
			$(document).keypress(function(event){
				var keycode = (event.keyCode ? event.keyCode : event.which);
				if(keycode == '13'){
					alert('You pressed a "enter" key in somewhere');	
				}
			});
		</script>
	</body>
</html>

Happy Learning !!

TwitterFacebookLinkedinRedditPocket

About Lokesh Gupta

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

2
Leave a Reply

This comment form is under antispam protection
2 Comment threads
0 Thread replies
0 Followers
 
Most reacted comment
Hottest comment thread
2 Comment authors
This comment form is under antispam protection
  Subscribe  
newest oldest most voted
Notify of
Mark

Great post… def. helpful…

Vote Up0Vote Down  Reply
3 years ago
Daniel

Hey, thanks for your article. Ive got i problem.. i think so. When i use your code but do “console.log(‘enter’)” instead of an alert, its always doing it twice. Wheres the problem?

Vote Up0Vote Down  Reply
5 years ago

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 – 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

Popular Tutorials

  • Java 8 Tutorial
  • Core Java Tutorial
  • Collections in Java
  • Java Concurrency
  • Spring Boot Tutorial
  • Spring AOP Tutorial
  • Spring MVC Tutorial
  • Spring Security Tutorial
  • Hibernate Tutorial
  • Python Tutorial
  • Jersey Tutorial
  • Maven Tutorial
  • Log4j Tutorial
  • Regex Tutorial

Meta Links

  • Advertise
  • Contact Us
  • Privacy policy
  • About Me

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 © 2016 · HowToDoInjava.com · All Rights Reserved. | Sitemap

wpDiscuz