Go Premium for a chance to win a PS4. Enter to Win

x
?
Solved

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

Posted on 2014-01-31
13
Medium Priority
?
534 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
VIDEO: THE CONCERTO CLOUD FOR HEALTHCARE

Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

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

What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

Question has a verified solution.

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

This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
In this blog, we’ll look at how improvements to Percona XtraDB Cluster improved IST performance.
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…

877 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