Solved

javascript:  add enter key = tab after initial load of form

Posted on 2014-01-31
13
504 Views
Last Modified: 2014-01-31
Using jquery and/or javascript, how can I make the enter key same as tab, but have that happen after a button is clicked on the form, in other words not onload of the form?

The following which I found via good search works if embedded in the body tag, but that does not work for me since I need the feature to occur post-load as mentioned above.

"if(event.keyCode==13) {event.keyCode=9; return event.keyCode })"
0
Comment
Question by:KeithMcElroy
  • 8
  • 5
13 Comments
 
LVL 58

Expert Comment

by:Gary
ID: 39824806
You can't change an enter to become a tab (not like that anyway)
Are you wanting to capture the enter key so you can set focus on the next input?
0
 

Author Comment

by:KeithMcElroy
ID: 39824807
I tried this at the event where I want the 'enter to tab' feature to work

                  var body = $('body')

                  body.addEventListener("onkeydown", "if(event.keyCode==13) {event.keyCode=9; return event.keyCode }", false)


It does not work, however, maybe it is close?
0
 

Author Comment

by:KeithMcElroy
ID: 39824810
Yes, on set focus on next input
0
ScreenConnect 6.0 Free Trial

Discover new time-saving features in one game-changing release, ScreenConnect 6.0, based on partner feedback. New features include a redesigned UI, app configurations and chat acknowledgement to improve customer engagement!

 
LVL 58

Expert Comment

by:Gary
ID: 39824815
Are you using jQuery or just plain javascript?
0
 

Author Comment

by:KeithMcElroy
ID: 39824822
jquery, tried this (no success) but seems close

                  $("input").live('keyup',function () {
                  $(this).next(".input").focus();
                        });
0
 

Author Comment

by:KeithMcElroy
ID: 39824823
corrected the class . still no work

  $("input").live('keyup',function () {
                  $(this).next("input").focus();
                        });
0
 
LVL 58

Accepted Solution

by:
Gary earned 500 total points
ID: 39824889
$("input").keypress(function(e) {
	if(e.which == 13) {
		var index = $('input[type=text]').index(this) + 1;
		var total_els = $('body').find('input[type=text]').length;
		if(total_els == index){index=0}
		$('input[type=text]:eq('+index+')').focus();
	}
});

Open in new window

0
 

Author Comment

by:KeithMcElroy
ID: 39825349
Thank you for the code, it is not working yet, but may be something about my form. I understand the steps so I bet I shall be able to make it work.
Will stand by for any further comments, otherwise shall reward points.
0
 
LVL 58

Expert Comment

by:Gary
ID: 39825360
Post your code, it may need tweaking a tiny bit
0
 

Author Comment

by:KeithMcElroy
ID: 39825370
I think I see where I need help, this is an internal web form, dynamic and I've never been able to figure out how to get a working sample outside the internal network,
However, the code you did, as is, is working except in rows where I have disabled text boxes and check boxes.  So, I think, if I can remove disabled inputs and check boxes from the forward cursor, it is good.  I will pursue, but if you know off top of your head, how to do that would be be great.  This is a big help.  Thank you!  Again will reward points, but want to allow for any further from you.
0
 

Author Comment

by:KeithMcElroy
ID: 39825381
the following did the trick:
                  $("input").keypress(function(e) {
                  if(e.which == 13) {
                  
                        var index = $('input[type=text]:enabled').index(this) + 1;
                        var total_els = $('body').find('input[type=text]:enabled').length;
                              if(total_els == index){index=0}
                                    $('input[type=text]:enabled:eq('+index+')').focus();
                        }
                  });
0
 

Author Closing Comment

by:KeithMcElroy
ID: 39825385
Awesome, thank you!
0
 
LVL 58

Expert Comment

by:Gary
ID: 39825387
So you want to skip disabled elements?
0

Featured Post

ScreenConnect 6.0 Free Trial

At ScreenConnect, partner feedback doesn't fall on deaf ears. We collected partner suggestions off of their virtual wish list and transformed them into one game-changing release: ScreenConnect 6.0. Explore all of the extras and enhancements for yourself!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Title # Comments Views Activity
Checkout Page Input Field not aligned 1 23
How to show span when clicked on? 10 22
Get Pixel color of the x and y axis Html without canvas 8 36
replace link with jQuery 4 14
In Part 1 (http://www.experts-exchange.com/Programming/Languages/Scripting/JavaScript/A_7849-Hex-Maze.html) we covered the hexagonal maze basics -- how the cells are represented in a JavaScript array and how the maze is displayed.  In this part, we'…
This article discusses how to create an extensible mechanism for linked drop downs.
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

777 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question