jump to navigation

Shift Focus To The Next Form-InputBox When User Presses Enter Key with JQuery December 27, 2011

Posted by Tournas Dimitrios in JQuery.

I am in love with Enter key on my computer’s keyboard , so  while filling  form input-fields , I like to hit Enter key to move to the next field instead the Tab key  .  This short article will demonstrate how to achieve this functionality . This example uses the bind() function that binds one or more events to a handler . If you plan to add textboxes at run-time and want this code to continue to work with the dynamically added text-boxes , use live() instead of bind() . Remember that in each call , you cannot bind more than one event to live()  . The key is detected using the e.which event handler . If the key == 13 , i.e the Enter key is pressed , the default behavior (postback) is suppressed using  e.preventDefault() and instead the index of the current textbox is retrieved . We then add 1 (one) to the index , to shift the focus to the next textbox . 

   <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
    <script type="text/javascript">
	$(function() {
	var $inp = $('input:text');
	$inp.bind('keydown', function(e) {
	 var key = e.which;
		if (key == 13) {
		var nextIndex = $('input:text').index(this) + 1;
		var maxIndex = $('input:text').length;
		if (nextIndex < maxIndex) {
		$('input:text:eq(' + nextIndex+')').focus();
		if  (nextIndex == maxIndex ) {
    <form action="" >
<h2>Enter text and hit Enter to move to next box</h2><br />
First name: <input type="text" name="firstname" /><br />
Last name: <input type="text" name="lastname" /><br />
Password: <input type="text" name="Password" /><br />
Password2: <input type="text" name="Password2" /><br />
Your Comments : <br><textarea rows="12" cols="30" ></textarea><br />


1. proxy list - December 30, 2011

I can not figure out how do I subscribe to your blog

tournasdimitrios1 - December 30, 2011

@proxy list
Welcome and Happy new Year .
At the bottom of the sidebar (at the right) are two links for RSS subscription
(WordPress and Feedburner ) , select one of these links . Alternatively you can “follow” me on Twitter , my name is “TDimitrios” .

2. Ali Sarjeant - January 11, 2012

I simply want to mention I’m all new to blogging and site-building and actually loved you’re web-site. Probably I’m going to bookmark your blog post . You surely have incredible well written articles. Many thanks for sharing with us your blog.

3. Free Zumba Online - January 26, 2012

This is my third time to your article, I love it every time!

tournasdimitrios1 - January 26, 2012

@Free Zumba
I’m glad you like it , welcome to this blog .

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s